webpack进阶-工作原理

webpack虽然使用简单，但是它对于使用者就是一个黑盒。

鲁迅说：如果你对一个事物原理不了解，那么你不可能熟练驾驭它。

如果有不熟悉webpack基本使用的小伙伴们，可以查看我之前的分享，可以狠狠的点击这里：https://segmentfault.com/a/11...

一. 流程概览

1. 校验options参数是否合法，options参数和命令行中的参数合并
2. 实例化Compiler对象，初始化所有配置插件 （compiler类继承自Tapable），挂载hooks。
3. 依次调用plugin的 apply 方法，让插件可以监听后续的所有事件节点。
4. 执行compiler.run方法，此方法实际上实例化Tapable中的AsyncSeriesHook(['compiler'])
5. 找到主入口，入口可能会有多个，这个取决config文件是否配置多个entry
6. 创建compilation对象，执行对应的回调。 包括： 进入每一个entry -> 使用loader进行编译 -> acorn解析AST -> 递归执行所有文件 -> 全部执行完成后执行compilation seal方法，对每个chunk进行整理，优化，封装。
7. Tapable广播emit事件，所有文件编译完成并且输出，这个时候还在内存中，可以获取所有文件信息和chunk的各种信息
8. 文件写入磁盘完成，Tapable广播afterEmit事件
9. 完成 编译，Tapable广播Done事件

二. Tapable

我们可以把webpack理解为一条生产线，需要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间会存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。

我们的插件就像一个插入到生产线中的一个功能，在特定的时机对生产线上的资源会做处理。webpack它是通过 Tapable来组织这条复杂的生产线的。

webpack在运行的过程中会广播事件，插件只需要关心监听它的事件，就能加入到这条生产线中。然后会执行相关的操作。webpack的事件流机制它能保证了插件的有序性，使整个系统的扩展性好。事件流机制使用了观察者模式来实现的。

总的来说，tapable暴露了3种hooks：

• tap （同步钩子）
• tapAsync （异步钩子）
• tapPromise（异步promise钩子）

常用事件流如下：

事件名称	说明
entryOption	初始化options
run	开始编译
make	从entry开始，递归分析依赖，并对依赖进行build
build-module	使用loader加载文件，并build模块
normal-module-loader	对loader的文件进行acorn编译，生成抽象语法树AST
program	开始对AST进行遍历，当遇到require时触发call require事件
seal	所有依赖build完成，开始对chunk进行优化（抽取公共模块、加hash等）
optimize-chunk-assets	压缩代码
emit	把各个chunk输出到结果文件

三. compiler

compiler对象 是Compiler类的实例对象， 而Compiler类继承自Tapable，webpack在启动时，会实例化一次compiler，后续每次文件的改动，都会创建一个compilation对象。

Compiler 负责文件监听和启动编译。Compiler 实例中包含了完整的 Webpack 配置，全局只有一个 Compiler 实例

compiler对象，大致数据结构如下：

我们在开发自定义插件时，webpack会调用插件类的apply方法，传入compiler，我们就可以在tapable广播事件流时，自定义做一些事件啦~

掌握webpack的工作原理，对我们后续开发自己的loader, plugin有极大的好处。
后面我将分享，如何开发自己的plugin。
码字不易，多多关注~