为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第二十天 组件化实现播放器(创建初始环境)

【金秋打卡】第二十天 组件化实现播放器(创建初始环境)

2022.11.14 20:24 65浏览

第一模块:

课程名称:TypeScript封装播放器组件

章节:2-1~2-5

讲师名称:西门老舅

第二模块:

为什么使用Webpack工具?

TypeScript编写的文件,不能直接在浏览器中运行,需要转换成浏览器识别的javascript文件。

每一个独立的组件可以看做是一个模块

提高开发效率,及工程化项目。

 

Cmd中配置环境:

1.  安装node,检出node是否安装成功(node -v)检测npm是否安装成功(npm -v)

2.  安装webpack。要思考全局安装还是局部安装,全局安装的话,此电脑内所有的项目都会使用这一个版本的webpack,问题就是不够灵活。(npm install -D webpack webpack-cli),如何在项目中使用呢?在项目的根目录下创建一个webpack.config.js文件(webpack的配置文件)

Module.exports={
    Entry:’src/main.js’,
    Output:{
        Path:path.resolve(_dirname,’dist’),
        Filename:’main.js’
},
    Module:{
    Rules:[
        {
    test:/\.css$/,
    use:[‘style-loader’,’css-loader’]
}
]
},
Plugins:[
    New HtmlWebpackPlugin({
    Template:’./src/index.html’
});
],
Mode:’develoment’
 
 
}
Packpage.json文件中:
“script”:{
    “build”:”webpack –config webpack.config.js”,
}


第四模块:

https://img1.sycdn.imooc.com/637233260001102213620837.jpg

https://img1.sycdn.imooc.com/63723326000115a113770852.jpg


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
0
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消