感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。

 新人作者，欢迎关注和收藏👏🏻👏🏻

1.为什么使用webpack？

开发中使用的es6 以及less、sass等css预处理语言在浏览器中无法识别，需要用webpack进行转换成低版本的语言。

2.使用webpack进行打包

​2.1使用es6模块语法定义模块

 引入到html中使用

在浏览器端打开 

 浏览器会报错，因为无法发识别es的模块语法，此时就需要用到webpack进行打包，将es6语法转换成浏览器能识别的es5语法

2.2安装webpack相关包

webpack：webpack的包文件

webpack-cli:webpack脚手架，安装之后可以执行webpack相关的命令

 

 2.3执行webpack命令开启开发模式，并指定./src/main.js为打包入口

 

开发模式下仅能编译es6的模块语法，并不能编译其他语法 

2.3执行webpack命令，开启生产模模式并指定打包入口为./src/main.js 

生成环境下会对js代码进行压缩，但编译也会耗费更长的时间，可以看到编译后的代码明显变短 

打包后的main.js在浏览器中可以正常运行 

小结：

webpack本身功能较少，只能处理js资源，一旦遇到css等其他资源就会报错。

所以我们学习webpack主要是学习如何处理其他资源 

 

  

感谢大家的点赞和转发，欢迎大家关注本人的博客。试用期指导，项目开发，简历优化，毕业设计/论文，欢迎添加本人微信。

 新人作者，欢迎关注和收藏👏🏻👏🏻

 觉得作者写的不错或者心情愉悦的老板也可以投币打赏，感谢观看，希望能给大家带来帮助