基本概念
在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解：
- Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
- Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
- Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
- Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
- Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
流程细节
Webpack 的构建流程可以分为以下三大阶段：
- 初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
- 编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
-
输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。
如果只执行一次构建，以上阶段将会按照顺序各执行一次。但在开启监听模式下，流程将变为如下：
image.png
webpack 广播出来的事件：（常用）
初始化阶段：
- environment 开始应用 Node.js 风格的文件系统到 compiler 对象，以方便后续的文件寻找和读取。
- entry-option 读取配置的 Entrys，为每个 Entry 实例化一个对应的 EntryPlugin，为后面该 Entry 的递归解析工作做准备。
- after-plugins 调用完所有内置的和配置的插件的 apply 方法。
- after-resolvers 根据配置初始化完 resolver，resolver 负责在文件系统中寻找指定路径的文件。
编译阶段：
- run ：启动一次新的编译。
- watch-run： 和 run 类似，区别在于它是在监听模式下启动的编译，在这个事件中可以获取到是哪些文件发生了变化导致重新启动一次新的编译。
- compile：该事件是为了告诉插件一次新的编译将要启动，同时会给插件带上 compiler 对象。
-
compilation： 当 Webpack 以开发模式运行时，每当检测到文件变化，一次新的 Compilation 将被创建。一个 Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation 对象也提供了很多事件回调供插件做扩展。
以下是compilation事件里的小事件
- build-module 使用对应的 Loader 去转换一个模块。
- normal-module-loader 在用 Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack 后面对代码的分析。
- program 从配置的入口模块开始，分析其 AST，当遇到 require 等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系。
- seal 所有模块及其依赖的模块都通过 Loader 转换完成后，根据依赖关系开始生成 Chunk。
- make： 一个新的 Compilation 创建完毕，即将从 Entry 开始读取文件，根据文件类型和配置的 Loader 对文件进行编译，编译完后再找出该文件依赖的文件，递归的编译和解析。
- after-compile： 一次 Compilation 执行完成。
- invalid： 当遇到文件不存在、文件编译错误等异常时会触发该事件，该事件不会导致 Webpack 退出。
在编译阶段中，最重要的要数 compilation 事件了，因为在 compilation 阶段调用了 Loader 完成了每个模块的转换操作，在 compilation 阶段又包括很多小的事件，
输出阶段：
- should-emit 所有需要输出的文件已经生成好，询问插件哪些文件需要输出，哪些不需要。
- emit 确定好要输出哪些文件后，执行文件输出，可以在这里获取和修改输出内容。
- after-emit 文件输出完毕。
- done 成功完成一次完成的编译和输出流程。
- failed 如果在编译和输出流程中遇到异常导致 Webpack 退出时，就会直接跳转到本步骤，插件可以在本事件中获取到具体的错误原因。
网友评论