webpack 原理及插件流程

核心概念

• entry：一个可执行模块或者库的入口
• chunk：多个文件组成一个代码块，可以将可执行的模块和它所以来的模块组合成一个 chunk，这是打包
• loader：文件转换器，把 es6 转为 es5、scss 转为 css 等
• plugin：扩展 webpack 功能的插件，在 webpack 构建的生命周期节点上加入扩展 hook，添加功能

webpack 构建流程（原理）

从启动构建到输出结果一系列过程：

• 初始化参数：解析 webpack 配置参数，合并 shell 传入和 webpack.config.js 文件配置的参数，形成最后的配置结果
• 开始编译：上一步得到的参数初始化 compiler 对象，注册所有配置的插件，插件监听 webpack 构建生命周期的事件节点，作出相应的反应，执行对象的 run 方法开始执行编译
• 确定入口：从配置的 entry 入口，开始解析文件构建 AST 语法树，找出依赖，递归下去
• 编译模块：递归中根据文件类型和 loader 配置，调用所有配置的 loader 对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
• 完成模块编译并输出：递归完事后，得到每个文件结果，包含每个模块以及它们之间的依赖关系，根据 entry 配置生成代码块 chunk
• 输出完成：输出所有的 chunk 到文件系统

在以上过程中，webpack 会在特定的时间点广播出特定的时间，插件在监听到感兴趣的时间点后，会执行特定的逻辑，并且插件可以调用 webpack 提供的 API 改变 webpack 的运行结果