webpack学习笔记

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

前言：

我们实现功能丰富的应用，拥有复杂的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的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
类似流程化的工具：

好的学习途径：

入门Webpack，看这篇就够了

webpack入门Demo下载

Webpack文章集