关于javascript: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 事件

咱们能够把 webpack 了解为一条生产线，须要通过一系列解决流程后能力将源文件转换成输入后果。这条生产线上的每个解决流程的职责都是繁多的，多个流程之间会存在依赖关系，只有实现以后解决后能力交给下一个流程去解决。

咱们的插件就像一个插入到生产线中的一个性能，在特定的机会对生产线上的资源会做解决。webpack 它是通过 Tapable 来组织这条简单的生产线的。

webpack 在运行的过程中会播送事件，插件只须要关怀监听它的事件，就能退出到这条生产线中。而后会执行相干的操作。webpack 的事件流机制它能保障了插件的有序性，使整个零碎的扩展性好。事件流机制应用了观察者模式来实现的。

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

事件名称	阐明
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 类继承自 Tapable，webpack 在启动时，会实例化一次 compiler，后续每次文件的改变，都会创立一个 compilation 对象。

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

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

咱们在开发自定义插件时，webpack 会调用插件类的 apply 办法，传入 compiler，咱们就能够在 tapable 播送事件流时，自定义做一些事件啦~

把握 webpack 的工作原理，对咱们后续开发本人的 loader, plugin 有极大的益处。
前面我将分享，如何开发本人的 plugin。
码字不易，多多关注~????

一. 流程概览