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。码字不易，多多关注~😙