聊聊webpack

随着前端的迅速发展，web 项目 复杂度 也是越来越高。为了便捷开发和利于优化，将一个复杂项目拆分成一个个小的模块，于是 模块化 开发出现了。但是由于缺乏规范化管理，出现了很多种模块化规范，从针对 nodejs 的 commonjs 规范，到针对浏览器端的 CMD、AMD，终于在 ES6 里规范了前端模块化。

前端构建工具

虽然前端开发在模块化进程上搞得风生水起，但是有个问题就是：源代码无法直接运行，必须通过 构建工具 转换后才可以正常运行。基于 nodejs 常见的构建工具有 gulp、fis3、webpack。

• gulp

Gulp 是一个基于流的自动化构建工具。Gulp 被设计得非常简单，只通过下面 5 种方法就可以支持几乎所有构建场景:

1. 通过 gulp.task 注册一个任务;
2. 通过 gulp.run 执行任务;
3. 通过 gulp.watch 监听文件的变化;
4. 通过 gulp.src 读取文件:
5. 通过 gulp.dest 写文件。

Gulp 的优点是好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。其缺点是集成度不高，要写很多配置后才可以用，无法做到开箱即用。

• fis3

Fis3 是一个来自百度的国产构建工具。相对于 Gulp 只提供了基本功能的工具，Fis3 集成了 Web 开发中的常用构建功能，如下所述。

1. 读写文件: 通过 fis.match 读文件，release 配置文件的输出路径。2. 资源定位: 解析文件之间的依赖关系和文件位置。3. 文件指纹: 在通过 useHash 配置输出文件时为文件 URL 加上 md5 戳，来优化浏览器的缓存。4. 文件编译: 通过 parser 配置文件解析器做文件转换，例如将 ES6 编译成 ES5。5. 压缩资源: 通过 optimizer 配置代码压缩方法。6. 图片合并: 通过 spriter 配置合并 css 里导入的图片到一个文件中，来减少 Hπp 请求数。

Fis3 的优点是集成了各种 Web 开发所需的构建功能，配置简单、开箱即用。
Fis3 是一种专注于 Web 开发的完整解决方案，如果将 Gulp 比作汽车的发动机，则可以将 Fis3 比作 一辆完整的汽车。

• webpack

Webpack 是一个打包模块化 JavaScript 的工具，在 Webpack 里一 切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

Webpack 的优点是 :

1. 专注于处理模块化的项目，能做到开箱即用、一步到位:
2. 可通过 Plugin 扩展，完整好用又不失灵活 ;
3. 使用场景不局限于 Web 开发:
4. 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展:
5. 良好的开发体验。

Webpack 的 缺点 是只能用于采用模块化开发的项目。

webpack 使用

《待更新 …》

webpack 工作流程

Webpack 的构建流程可以分为以下三大阶段：

1. 初始化: 启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。

2. 编译: 从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件的内容，再找到该 Module 依赖的 Module，递归地进行编译处理。

在编译阶段中，最重要的事件是 compilation，因为在 compilation 阶段调用了 Loader, 完成了每个模块的转换操作。在 compilation 阶段又会发生很多小事件。

3. 输出: 将编译后的 Module 组合成 Chunk，将 Chunk 转换成文件，输出到文件系统中。