第 12 卷

执行 npx webpack 打包，查看 dist/bundle.js 中转换后的内容：

Code block

1// 转换后的核心内容（拼音首字⺟）

2console.log('n h , W b k L d');

3const message = 'z d y L d c s';

4console.log(message);

1. 扩展：编写异步Loader

若Loader处理逻辑是异步的（如读取文件、网络请求），需使用异步回调：

Code block

1// 异步Loader示例（修改上述Loader为异步）

2module.exports = function (source) { 3const options = getOptions(this) || {};

4validateOptions(schema, options, 'ChineseToPinyinLoader');

5 6// 1. 获取异步回调函数

7const callback = this.async();

8 9// 2. 模拟异步处理（如读取文件、网络请求）

10setTimeout(() => { 11try {

误）

20} catch (err) {

最终补充总结

1. Tree Shaking 核心是删除未使用代码，需 ES 模块+生产环境，通过 sideEffects 优化树摇效

果。

1. Webpack 与 Babel 协同核心是 babel-loader，Babel 负责转译 ES6+ 语法，Webpack 负责

模块打包。

1. HMR 对比全页面刷新：仅更改变模块、保留状态、速度更快，基于 WebSocket 增量更新。
2. Webpack 关键生命周期钩子：初始化（initialize）、编译（compilation）、输出（emit）、完成

（done）等，插件通过监听钩子扩展功能。

1. 编写 Loader 核心是导出处理函数，遵循单一职责，支持同步/异步，可通过 loader-utils 处

理配置。

十六、解释Webpack插件(Plugin) 的工作原理及如何自定义插件。

Webpack 插件（Plugin）是 Webpack 生态的核心扩展机制，用于解决 Loader 无法覆盖的复杂需求（如资源生成、流程优化、日志输出等）。其工作原理基于 Webpack 的生命周期钩子机制，通过监听

构建流程中的特定阶段，介入并修改构建过程或输出结果。自定义插件的核心是遵循 Webpack 插件规范，实现一个带有 apply 方法的类。

1. Plugin 的工作原理

• 核心基石：Tapable 库：Webpack 内部通过 tapable 库实现生命周期钩子（Hook），提供了

同步、异步（并行/串行）等多种钩子类型（如 SyncHook、 AsyncSeriesHook）。插件的本质就是“订阅”这些钩子，在钩子触发时执行自定义逻辑。

• 核心载体：Compiler 与 Compilation：

• Compiler：全局唯一实例，代表整个 Webpack 构建流程，包含完整的构建配置和生命周期钩

子，插件通过 apply 方法接收 Compiler 实例，从而监听全局钩子。

• Compilation：每次构建（或重新构建）时创建的实例，代表一次具体的编译过程，负责模块

解析、依赖收集、chunk 生成等核心操作，包含编译阶段的局部钩子，插件可通过 Compiler 的 compilation 钩子获取 Compilation 实例，介入具体的编译逻辑。

• 工作流程：

（第一个参数为插件名称，用于调试；第二个参数为钩子触发时执行的回调函数）；

1. Webpack 启动构建后，按顺序触发各个生命周期钩子；
2. 当插件订阅的钩子被触发时，执行回调函数，可通过 Compiler 或 Compilation 实例获

取构建状态、修改输出资源或干预构建流程。

1. 自定义 Plugin 的步骤与规范

自定义 Plugin 需遵循以下规范：

• 必须是一个类（ES6 Class），确保可实例化（支持传入配置参数）；
• 类中必须包含 apply 方法，该方法是插件的入口，Webpack 会在初始化插件时自动调用，并传

入 Compiler 实例；

• 通过 Compiler 或 Compilation 的钩子机制实现功能，避免直接修改 Webpack 内部核心对象

（通过官方暴露的 API 操作）。

1. 自定义 Plugin 示例（生成构建日志文件）

以“构建完成后生成包含构建信息（时间、产物大小）的日志文件”为例，实现自定义插件：

（1）实现插件类

Code block

1 2// 自定义插件：BuildLogPlugin.js

3const fs = require('fs');

4const path = require('path');

5 6class BuildLogPlugin {

7// 接收插件配置参数（如日志文件路径）

8constructor(options = {}) { 9this.logPath = options.logPath || path.resolve(__dirname, 'build-log.txt');

10} 11