webpack学习笔记

今天药忘吃喽~ 2022-06-04 07:18 240阅读 0赞

> 静水深潭，做技术就是要沉下心来，知其理，了其用，发其优，比之邻，而后观子义。

![这里写图片描述][what-is-webpack.png]

> 前言：

我们实现功能丰富的应用，拥有复杂的js代码和一大堆依赖包，模块化，less等css预
    
    处理 这些改进确实大大提供了我们开发效率，但是利用他们的开发的文件我们需要
    
    额外的处理才能让浏览器识别，手动处理非常复杂，这就为webpack类的工具提供了需求；

> **知其理**
> 
> Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），  
> Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

--------------------

> **了其用**

--------------------

> 1.  webpack 打包文件
> 2.  可以处理像Less、Sass 、Stylus 、.Vue文件 ES6语法、Jsx、.Ts文件….自动转化成浏览器能识别的语言，不必专门去处理这些语言了。
> 3.  可以对代码进行压缩、合并、混肴、减少http请求，减轻服务器的带宽….
> 4.  像热更新、HMR-自动刷新实时预览修改后的效果,减少开发人员的负担。
> 5.  其他的在工作中就会慢慢体会到把

--------------------

> **比之邻**

--------------------

> Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。  
> 类似流程化的工具：

![这里写图片描述][700]

好的学习途径：

[入门Webpack，看这篇就够了][Webpack]

[webpack入门Demo下载][webpack_Demo]

[Webpack文章集][Webpack 1]

[what-is-webpack.png]: /images/20220604/17c9fd048a984159a44a5e83a2503dde.png
[700]: /images/20220604/54bbc80d8308456da1951ef173790f0a.png
[Webpack]: http://www.jianshu.com/p/42e11515c10f
[webpack_Demo]: https://github.com/zjlindd/webpack
[Webpack 1]: https://github.com/webpack-china/awesome-webpack-cn