TypeScript 中编写 Webpack 自定义 Plugin 的核心是实现符合 Plugin API 的类并在关键钩子中插入逻辑：启动阶段（environment、entryOption）、编译阶段（compile、buildModule）、生成阶段（processAssets）、完成阶段（done、failed），需借助 @types/webpack 类型声明并注意钩子同步/异步用法及作用域差异。
在 TypeScript 中编写 Webpack 自定义 Plugin 来监控构建生命周期，核心是实现一个符合 Webpack Plugin API 的类或对象，并在合适钩子（Hook）中插入逻辑。关键不是“写个插件”，而是理解 Webpack 的编译流程和钩子触发时机，再用 TypeScript 类型安全地接入。
理解 Webpack 构建生命周期的关键钩子
Webpack 的构建过程由 Compiler 和 Compilation 两个核心对象驱动。监控通常关注以下阶段：
-
启动阶段：如
compiler.hooks.environment、compiler.hooks.entryOption—— 配置解析完成、入口确定前 -
编译阶段：如
compiler.hooks.compile（新 Compilation 开始）、compilation.hooks.buildModule（模块开始构建） -
生成阶段：如
compilation.hooks.processAssets（资产处理，推荐用于监控输出前状态） -
完成阶段：如
compiler.hooks.done（整个构建成功结束）、compiler.hooks.failed（构建出错）
用 TypeScript 编写基础监控插件
定义一个类，实现 apply 方法，在其中订阅所需钩子。TypeScript 提供了 webpack 包中的类型声明（需安装 @types/webpack）：
import type { Compiler, Compilation, WebpackPluginInstance } from 'webpack';
<p>class BuildMonitorPlugin implements WebpackPluginInstance {
apply(compiler: Compiler) {
console.log('[BuildMonitor] 插件已加载');</p><pre class="brush:php;toolbar:false;">compiler.hooks.environment.tap('BuildMonitor', () => {
console.log('[BuildMonitor] 环境初始化完成');
});
compiler.hooks.compile.tap('BuildMonitor', (params) => {
console.log(`[BuildMonitor] 开始新编译（时间戳：${Date.now()}）`);
});
compiler.hooks.done.tap('BuildMonitor', (stats) => {
const time = stats.endTime - stats.startTime;
console.log(`[BuildMonitor] 构建完成，耗时 ${time}ms`);
console.log(`[BuildMonitor] 输出资源数：${stats.toJson().assets?.length || 0}`);
});
compiler.hooks.failed.tap('BuildMonitor', (error) => {
console.error('[BuildMonitor] 构建失败：', error.message);
});} }
export default BuildMonitorPlugin;
注意：tap 是同步钩子；若需异步逻辑（如写日志文件），可改用 tapAsync 或 tapPromise，并配合回调或 Promise。
监控模块级细节（如依赖图、资源大小）
想深入到每个模块的处理过程，需监听 compilation 实例上的钩子。在 compiler.hooks.compilation 中获取 compilation 引用：
[BuildMonitor] 当前资产总大小：${(totalSize / 1024).toFixed(2)} KB
这里用到了 compilation.getAssets() 获取最终资源，比旧版 compilation.assets 更可靠（后者可能包含中间态内容）。
在 webpack.config.ts 中使用插件
确保配置文件是 TypeScript 格式（webpack.config.ts），并正确导入插件：
// webpack.config.ts
import type { Configuration } from 'webpack';
import BuildMonitorPlugin from './plugins/BuildMonitorPlugin';
<p>const config: Configuration = {
// ...其他配置
plugins: [new BuildMonitorPlugin()],
};</p><p>export default config;
</p>
如果使用 ESM，注意 Webpack 当前（v5）默认仍以 CommonJS 方式加载配置，建议导出为 module.exports 或确保 tsconfig 中 module 设置兼容（如 "module": "CommonJS"）。
不复杂但容易忽略的是钩子执行顺序和作用域——compiler 钩子全局生效，compilation 钩子只对当次编译有效；多个插件间无默认顺序，需靠 tap 名称或 stage 控制优先级。
