共计 1602 个字符，预计需要花费 5 分钟才能阅读完成。
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。
码字不易，多多关注~????