Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。 Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。 Loader：模块转换器，用于把模块原内容按照需求转换成新内容。 Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
Webpack 的构建流程可以分为以下三大阶段：
| 事件名 | 解释 | |
|---|---|---|
| 初始化参数 | 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。 | webpack-cli/bin/webpack.js:436 |
| 实例化 Compiler | 用上一步得到的参数初始化 Compiler 实例，Compiler 负责文件监听和启动编译。Compiler 实例中包含了完整的 Webpack 配置，全局只有一个 Compiler 实例。 | webpack/lib/webpack.js:32 |
| 加载插件 | 依次调用插件的 apply 方法，让插件可以监听后续的所有事件节点。同时给插件传入 compiler 实例的引用，以方便插件通过 compiler 调用 Webpack 提供的 API。 | webpack/lib/webpack.js:42 |
| environment | 开始应用 Node.js 风格的文件系统到 compiler 对象，以方便后续的文件寻找和读取。 | webpack/lib/webpack.js:40 |
| entry-option | 读取配置的 Entrys，为每个 Entry 实例化一个对应的 EntryPlugin，为后面该 Entry 的递归解析工作做准备。 | webpack/lib/webpack.js:275 |
| after-plugins | 调用完所有内置的和配置的插件的 apply 方法。 | webpack/lib/WebpackOptionsApply.js:359 |
| after-resolvers | 根据配置初始化完 resolver，resolver 负责在文件系统中寻找指定路径的文件。 | webpack/lib/WebpackOptionsApply.js:396 |
| 事件名 | 解释 | |
|---|---|---|
| run | 启动一次新的编译。 | webpack/lib/webpack.js:194 |
| watch-run | 和 run 类似，区别在于它是在监听模式下启动的编译，在这个事件中可以获取到是哪些文件发生了变化导致重新启动一次新的编译。 | |
| compile | 该事件是为了告诉插件一次新的编译将要启动，同时会给插件带上 compiler 对象。 | webpack/lib/Compiler.js:455 |
| compilation | 当 Webpack 以开发模式运行时，每当检测到文件变化，一次新的 Compilation 将被创建。一个 Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。Compilation 对象也提供了很多事件回调供插件做扩展。 | webpack/lib/Compiler.js:418 |
| make | 一个新的 Compilation 创建完毕，即将从 Entry 开始读取文件，根据文件类型和配置的 Loader 对文件进行编译，编译完后再找出该文件依赖的文件，递归的编译和解析。 | webpack/lib/Compiler.js:459 |
| after-compile | 一次 Compilation 执行完成。 | webpack/lib/Compiler.js:467 |
在编译阶段中，最重要的要数 compilation 事件了，因为在 compilation 阶段调用了 Loader 完成了每个模块的转换操作，在 compilation 阶段又包括很多小的事件，它们分别是：
| 事件名 | 解释 | |
|---|---|---|
| build-module | 使用对应的 Loader 去转换一个模块。 | webpack/lib/Compilation.js:345 |
| normal-module-loader | 在用 Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack 后面对代码的分析。 | webpack/lib/NormalModule.js:177 |
| program | 从配置的入口模块开始，分析其 AST，当遇到 require 等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系。 | webpack/lib/Parser.js:1947 |
| seal | 所有模块及其依赖的模块都通过 Loader 转换完成后，根据依赖关系开始生成 Chunk。 | webpack/lib/Compilation.js:826 |
| 事件名 | 解释 | |
|---|---|---|
| should-emit | 所有需要输出的文件已经生成好，询问插件哪些文件需要输出，哪些不需要。 | webpack/lib/Compiler.js:146 |
| emit | 确定好要输出哪些文件后，执行文件输出，可以在这里获取和修改输出内容。 | webpack/lib/Compiler.js:287 |
| after-emit | 文件输出完毕。 | webpack/lib/Compiler.js:278 |
| done | 成功完成一次完成的编译和输出流程。 | webpack/lib/Compiler.js:166 |
| failed | 如果在编译和输出流程中遇到异常导致 Webpack 退出时，就会直接跳转到本步骤，插件可以在本事件中获取到具体的错误原因。 |
在输出阶段已经得到了各个模块经过转换后的结果和其依赖关系，并且把相关模块组合在一起形成一个个 Chunk。 在输出阶段会根据 Chunk 的类型，使用对应的模版生成最终要要输出的文件内容。
webpack.config.js中的参数和shell参数整合到options对象上调用webpack-cli/bin/webpack.js开始编译和打包
webpack-cli/bin/webpack.js中返回一个compiler对象，并调用了compiler.run()
run方法触发了before-run、run两个事件，然后通过readRecords读取文件，通过compile进行打包,该方法中实例化了一个Compilation类before-compile、compile、make等事件SingleEntryPlugin监听函数，调用compilation.addEntry方法_addModuleChain完成了两件事：根据模块的类型获取对应的模块工厂并创建模块；构建模块finish及seal方法