1. 什么是 Plugin
Loader 的功能定位是转换代码，而一些其他的操作难以使用 loader 完成，比如：
- 当 webpack 生成文件时，顺便多生成一个说明描述文件。
- 当 webpack 编译启动时，控制台输出一句话表示 webpack 启动了。
- 当某个特定条件满足时，执行特定的操作。
这种类似的功能需要把功能嵌入到 webpack 的编译流程中，而这种事情的实现是依托于 plugin 的。
下图红点都是plugin功能能够触及到的编译流程，可见plugin的功能有多强大。
2. Plugin 的本质
Plugin 的本质是一个带有 apply 方法的对象。通常，习惯上，我们会将该对象写成构造函数的模式。
class MyPlugin {
apply(compiler) {
// 在这里注册钩子函数
}
}
const plugin = new MyPlugin();
要将插件应用到 webpack，需要把插件对象配置到 webpack 的 plugins 数组中，如下：
module.exports = {
plugins: [
new MyPlugin()
]
};
3. Plugin 的工作流程
apply 函数会在初始化阶段，创建好 Compiler 对象后运行。Compiler 对象是在初始化阶段构建的，整个 webpack 打包期间只有一个 Compiler 对象，后续完成打包工作的是 Compiler 对象内部创建的 Compilation。
apply 方法会在创建好 Compiler 对象后调用，并向方法传入一个 Compiler 对象。
4. 注册钩子函数
Compiler 对象提供了大量的钩子函数（hooks，可以理解为事件），plugin 的开发者可以注册这些钩子函数，参与 webpack 编译和生成。
你可以在 apply 方法中使用下面的代码注册钩子函数：
class MyPlugin {
apply(compiler) {
compiler.hooks.事件名称.事件类型(name, function(compilation) {
// 事件处理函数
});
}
}
事件名称
即要监听的事件名，即钩子名。所有的钩子可以参考官方文档：Compiler Hooks
事件类型
这一部分使用的是 Tapable API，这个小型的库是一个专门用于钩子函数监听的库。它提供了一些事件类型：
- tap：注册一个同步的钩子函数，函数运行完毕则表示事件处理结束。
- tapAsync：注册一个基于回调的异步的钩子函数，函数通过调用一个回调表示事件处理结束。
- tapPromise：注册一个基于 Promise 的异步的钩子函数，函数通过返回的 Promise 进入已决状态表示事件处理结束。
处理函数
处理函数有一个事件参数 compilation，compilation 对象代表了一次新的编译。compilation 对象提供了许多方法和属性，可以用来获取编译过程中的信息和控制编译过程。
5. 示例
假设我们想在 webpack 编译启动时，在控制台输出一句话表示 webpack 启动了。
自定义 Plugin
class MyPlugin {
apply(compiler) {
compiler.hooks.compile.tap('MyPlugin', (params) => {
console.log('Webpack is starting to compile...');
});
compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
console.log('Webpack is emitting files...');
callback();
});
}
}
module.exports = MyPlugin;
使用自定义 Plugin
在 webpack.config.js 中使用自定义的插件：
const MyPlugin = require('./MyPlugin');
module.exports = {
mode: 'development', // 或 'production'
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new MyPlugin()
]
};
安装依赖
确保你已经安装了必要的依赖：
npm install --save-dev webpack webpack-cli
运行构建
在 package.json 中添加一个 build 脚本：
{
"scripts": {
"build": "webpack"
}
}
然后运行：
npm run build
构建过程中，你会在控制台看到如下输出：
Webpack is starting to compile...
Webpack is emitting files...
总结
通过本课程，你已经了解了 webpack 中 plugin 的概念、工作流程以及如何编写和使用自定义插件。合理使用 plugin 可以帮助你扩展 webpack 的功能，实现更复杂的构建需求。
