webpack编译流程

中无主而不止，外无正而不行。——庄子

简介

---

如今前端开发基本上都会用到react、vue，用到了前端mvc、mvvm框架，基本上都会涉及到打包发布，打包经常使用的工具就是webpack、gulp等等。常常使用天然也要了解一些他大体的流程也会方便使用。 首先要理解webpack中比较核心的概念：

• Entry: 指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库。
• Output：告诉webpack如何命名输出的文件以及输出的目录
• Module: 模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出全部依赖的模块。
• Chunk：coding split的产物，咱们能够对一些代码打包成一个单独的chunk，好比某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及之前咱们都利用CommonsChunkPlugin将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中CommonsChunkPlugin被废弃，使用SplitChunksPlugin
• Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
• Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件能够监听这些事件的发生，在特定时机作对应的事情。

webpack 执行流程和事件流以下图所示：

webpack编译过程当中一个比较重要的概念compiler、compilation，以下：

• Compiler 对象：负责文件监听和启动编译。Compiler 实例中包含了完整的 webpack 配置，全局只有一个 Compiler 实例。
• Compilation 对象：当 webpack 以开发模式运行时，每当检测到文件变化，一次新的 Compilation 将被建立。一个 Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation 对象也提供了不少事件回调供插件作扩展。

webpack流程

---

Webpack的运行流程是一个串行的过程，从启动到结束依次执行如下流程：

1. 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
2. 编译：从 Entry 发出，针对每一个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
3. 输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

若是只执行一次构建，以上阶段将会按照顺序各执行一次。但在开启监听模式下，流程将变为以下：

下面具体介绍一下 webpack的三个大阶段具体的小步。

初始化阶段

初始化阶段大体分为：

• 合并shell和配置文件文件的参数而且实例化Complier对象。
• 加载插件
• 处理入口

事件名	解释
初始化参数	从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。 这个过程当中还会执行配置文件中的插件实例化语句 new Plugin()。
实例化 Compiler	用上一步获得的参数初始化 Compiler 实例，Compiler 负责文件监听和启动编译。Compiler 实例中包含了完整的 Webpack 配置，全局只有一个 Compiler 实例。
加载插件	依次调用插件的 apply 方法，让插件能够监听后续的全部事件节点。同时给插件传入 compiler 实例的引用，以方便插件经过 compiler 调用 Webpack 提供的 API。
environment	开始应用 Node.js 风格的文件系统到 compiler 对象，以方便后续的文件寻找和读取。
entry-option	读取配置的 Entrys，为每一个 Entry 实例化一个对应的 EntryPlugin，为后面该 Entry 的递归解析工做作准备。
after-plugins	调用完全部内置的和配置的插件的 apply 方法。
after-resolvers	根据配置初始化完 resolver，resolver 负责在文件系统中寻找指定路径的文件。

编译阶段

事件名	解释
before-run	清除缓存
run	启动一次新的编译。
watch-run	和 run 相似，区别在于它是在监听模式下启动的编译，在这个事件中能够获取到是哪些文件发生了变化致使从新启动一次新的编译。
compile	该事件是为了告诉插件一次新的编译将要启动，同时会给插件带上 compiler 对象。
compilation	当 Webpack 以开发模式运行时，每当检测到文件变化，一次新的 Compilation 将被建立。一个 Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation 对象也提供了不少事件回调供插件作扩展。
make	一个新的 Compilation 建立完毕，即将从 Entry 开始读取文件，根据文件类型和配置的 Loader 对文件进行编译，编译完后再找出该文件依赖的文件，递归的编译和解析。
after-compile	一次 Compilation 执行完成。这里会根据编译结果 合并出咱们最终生成的文件名和文件内容。
invalid	当遇到文件不存在、文件编译错误等异常时会触发该事件，该事件不会致使 Webpack 退出。

这里主要最重要的就是compilation过程，compilation 实际上就是调用相应的 loader 处理文件生成 chunks并对这些 chunks 作优化的过程。几个关键的事件（Compilation对象this.hooks中）：

事件名	解释
build-module	使用对应的 Loader 去转换一个模块。
normal-module-loader	在用 Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack 后面对代码的分析。
program	从配置的入口模块开始，分析其 AST，当遇到 require 等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清全部模块的依赖关系。
seal	全部模块及其依赖的模块都经过 Loader 转换完成后，根据依赖关系开始生成 Chunk。

输出阶段

事件名	解释
should-emit	全部须要输出的文件已经生成好，询问插件哪些文件须要输出，哪些不须要。
emit	肯定好要输出哪些文件后，执行文件输出，能够在这里获取和修改输出内容。
after-emit	文件输出完毕。
done	成功完成一次完成的编译和输出流程。
failed	若是在编译和输出流程中遇到异常致使 Webpack 退出时，就会直接跳转到本步骤，插件能够在本事件中获取到具体的错误缘由。

Tapable

---

Webpack能够将其理解是一种基于事件流的编程范例，一个插件合集。而将这些插件控制在webapck事件流上的运行的就是webpack本身写的基础类Tapable。Webpack 的事件流机制应用了观察者模式，和 Node.js 中的 EventEmitter很是类似。 Tapable 有四组成员函数：

• plugin(name:string, handler:function)：容许将一个自定义插件注册到 Tapable 实例 的事件中。它的行为和 EventEmitter 的 on() 方法类似，用来注册一个处理函数/监听器，来在信号/事件发生时作一些事情。
• apply(…pluginInstances: (AnyPlugin|function)[])：AnyPlugin 应该是一个拥有 apply 方法的类（也能够是一个对象，可是不常见），或者只是一个包含注册代码的函数。这个方法只调用插件的定义，从而将真正的事件监听器能够注册到 Tapable 实例的注册列表中。
• applyPlugins(name:string, …)*：Tapable 实例能够经过使用这些函数，在指定的 hash 下应用全部的插件。这一组方法的行为和 EventEmitter 的 emit() 方法类似，使用多种策略细致地控制事件的触发。
• mixin(pt: Object)：一个简单地方法，使用混入而不是继承的方式扩展 Tapable 的原型。

上面核心的对象 Compiler、Compilation等都是继承于Tabable类。能够直接在 Compiler 和 Compilation 对象上广播和监听器，方法以下：

/** * 广播出事件 * event-name 为事件名称，注意不要和现有的事件重名 * params 为附带的参数 */
  compiler.apply('event-name',params);

  /** * 监听名称为 event-name 的事件，当 event-name 事件发生时，函数就会被执行。 * 同时函数中的 params 参数为广播事件时附带的参数。 */
  compiler.plugin('event-name',function(params) {
    doSomeThing();
  });
复制代码

同理，compilation.apply 和 compilation.plugin 使用方法和上面一致。

tapable库暴露了不少Hook（钩子）类，为插件提供挂载的钩子。

const {
    SyncHook,
    SyncBailHook,
    SyncWaterfallHook,
    SyncLoopHook,
    AsyncParallelHook,
    AsyncParallelBailHook,
    AsyncSeriesHook,
    AsyncSeriesBailHook,
    AsyncSeriesWaterfallHook
 } = require("tapable");
复制代码

以下图所示tapable上的钩子：

tabable的提供了两类绑定钩子的方式：

• AsyncHook(异步钩子)： 绑定能够经过tapAsync 或 tapPromise（以及 tap），执行经过 callAsync、promise；
• syncHook(钩子)： 绑定能够经过tap，执行经过 call；

具体的用法请看Tapable。

总结

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行如下流程：

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
2. 开始编译：用上一步获得的参数初始化 Compiler 对象，加载全部配置的插件，执行对象的 run 方法开始执行编译；
3. 肯定入口：根据配置中的 entry 找出全部的入口文件；
4. 编译模块：从入口文件出发，调用全部配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到全部入口依赖的文件都通过了本步骤的处理；
5. 完成模块编译：在通过第4步使用 Loader 翻译完全部模块后，获得了每一个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每一个 Chunk 转换成一个单独的文件加入到输出列表，这步是能够修改输出内容的最后机会；
7. 输出完成：在肯定好输出内容后，根据配置肯定输出的路径和文件名，把文件内容写入到文件系统。

同时咱们也了解了webpack中比较核心的几个概念compiler、compilation、tapable。

参考

webpack学习笔记（原理，实现loader和插件）

webpack 源码分析六：webpack 处理流程分析

Webpack原理与实践（一）：打包流程