webpack进阶-工作原理
webpack虽然使用简单，但是它对于使用者就是一个黑盒。
鲁迅说：如果你对一个事物原理不了解，那么你不可能熟练驾驭它。
如果有不熟悉webpack基本使用的小伙伴们，可以查看我之前的分享，可以狠狠的点击这里：https://segmentfault.com/a/11...
一. 流程概览
- 校验options参数是否合法，options参数和命令行中的参数合并
- 实例化Compiler对象，初始化所有配置插件 （compiler类继承自Tapable），挂载hooks。
- 依次调用plugin的 apply 方法，让插件可以监听后续的所有事件节点。
- 执行compiler.run方法，此方法实际上实例化Tapable中的AsyncSeriesHook(['compiler'])
- 找到主入口，入口可能会有多个，这个取决config文件是否配置多个entry
- 创建compilation对象，执行对应的回调。 包括： 进入每一个entry -> 使用loader进行编译 -> acorn解析AST -> 递归执行所有文件 -> 全部执行完成后执行compilation seal方法，对每个chunk进行整理，优化，封装。
- Tapable广播emit事件，所有文件编译完成并且输出，这个时候还在内存中，可以获取所有文件信息和chunk的各种信息
- 文件写入磁盘完成，Tapable广播afterEmit事件
- 完成 编译，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。码字不易，多多关注~😙
转载自:https://segmentfault.com/a/1190000039242550