答案：编写Webpack插件需创建带apply方法的类，通过compiler.hooks接入生命周期，如done、emit等钩子，操作compilation.assets修改输出文件，结合构造函数传参实现配置化，掌握钩子机制与执行时机即可定制打包逻辑。
想让Webpack按你的想法工作？写个插件就行。Webpack的插件系统非常强大，能让你在打包流程的任意环节插入自定义逻辑。不管是自动生成HTML、清理输出目录，还是分析打包体积，都能通过插件实现。核心原理是利用Webpack的事件钩子（hooks），在编译生命周期中执行任务。
理解Webpack插件的基本结构
Webpack插件本质上是一个带有apply方法的类或对象。apply方法会在Webpack启动时被调用，参数是compiler实例，通过它你可以访问整个构建上下文和生命周期钩子。
最简单的插件长这样：
class MyPlugin {
apply(compiler) {
compiler.hooks.done.tap('MyPlugin', (stats) => {
console.log('打包完成！');
});
}
}
module.exports = MyPlugin;
把这玩意儿加到webpack.config.js的plugins数组里，就能看到每次构建结束后的提示。
常用钩子与使用场景
Webpack提供了几十个钩子，关键是要选对时机。以下是最常用的几个：
- compiler.hooks.compile：开始编译前触发，适合做前置检查或初始化
- compiler.hooks.emit：生成资源到输出目录前，常用来新增或修改输出文件
-
compilation.hooks.processAssets：处理资产阶段，可以读取、修改assets对象里的文件
内容 - compiler.hooks.done：构建完成，适合做统计、通知等收尾操作
内容比如你想在输出目录加个版本说明文件：
apply(compiler) {
compiler.hooks.emit.tapAsync('VersionPlugin', (compilation, callback) => {
const version = `构建时间：${new Date().toISOString()}`;
compilation.assets['version.txt'] = {
source: () => version,
size: () => version.length
};
callback();
});
}
访问和修改构建产物
真正有用的功能往往需要操作打包结果。compilation对象的assets属性就是所有待输出文件的集合。每个asset都有source()和size()方法。
你可以遍历assets，找出JS文件并注入版权注释：
compilation.hooks.processAssets.tap(
{
name: 'AddBannerPlugin',
stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
},
(assets) => {
Object.keys(assets).forEach(name => {
if (name.endsWith('.js')) {
const source = assets[name].source();
const banner = '/* 版权所有 */\n';
compilation.assets[name] = {
source: () => banner + source,
size: () => (banner + source).length
};
}
});
}
);
注意stage参数，它决定了处理顺序，避免和其他插件冲突。
传参与配置灵活性
实用的插件应该支持配置。通过构造函数接收选项，让插件更通用：
class ReportPlugin {
constructor(options = {}) {
this.filename = options.filename || 'report.txt';
}
apply(compiler) {
compiler.hooks.done.tap('ReportPlugin', (stats) => {
const report = JSON.stringify(stats.toJson(), null, 2);
require('fs').writeFileSync(this.filename, report);
});
}
}
使用时传配置：new ReportPlugin({ filename: 'build-report.json' })，立马变专业。
基本上就这些。掌握钩子机制、搞清compiler和compilation的区别、学会操作assets，你就能写出解决实际问题的插件。不复杂但容易忽略细节，比如异步钩子要用tapAsync或tapPromise。多看官方文档的Hook API，再参考html-webpack-plugin这类成熟插件的源码，很快就能上手。
