来来来，学一下这两年前端一大热门轮子——webpack
前端存在的问题：
最初，前端的文件是以标签的形式加载在html中，比如：
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
网页规模小，这样搞没啥问题。但是如果页面功能复杂（如大型的单页web app），涉及到的js文件或者css文件多的时候，用这种传统的方式，html上就会杂乱不堪，写个js全靠眼睛观察，非常不爽。
一旦不爽，像我这样的渣渣就会出错。
模块化轮子：
- CommonJS
- AMD
- CMD
- UMD
- ES6 模块
这么多看起来就头疼啊，先不深究这些，我们现在要知道的是：怎么样可以将前端的东西模块化。
首先，前端的模块需要在浏览器中执行，所以浏览器需要得到这些模块。
然后，浏览器加载模块有两个极端的方法：每个模块单独请求、请求一次得到所有打包好的模块。第一种请求次数多，比较耗时，第二种加载过多模块也会导致性能跟时间问题。
取中间的办法：按照需求进行定量的加载（分块传输）。
所有资源都是模块：
在上面的‘科研探讨’中，只说了javascript脚本文件，而实际生产开发，还会涉及到css、图片、html、字体等其他资源，这些资源都有各自的存在形式，比如css就有less、scss等。
如果这些资源也能以下面的形式进行加载，那就一颗赛艇了：
require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");
静态分析：
在编译的时候，需要对整个代码进行静态分析，分析出各模块类型以及以来关系，然后将不同的类型交给不同的加载器进行处理。
比如：使用less写的样式模块，可以先使用less加载器将它们转成css，然后通过css模块将这个css插入到<style>标签中进行执行
webpack就是为了解决以上说到的这些大事情的。
什么是Webpack：
Webpack是一个模块打包器。Webpack会分析资源之间的相互依赖，然后按照指定的规则生成对应的静态资源，从下面这张图可以很清晰的看到Webpack这个轮子是干嘛的：
Webpack 是什么
Webpack特点：
代码拆分：
Webpack有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Loader：
有了Loader之后，转换器可以将各种资源转成javascript模块。
智能解析：
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。
插件：
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
网友评论