JavaScript 中怎么编写自定义 Webpack 插件实现打包流程定制-js教程-PHP中文网

编写自定义 webpack 插件需实现含 apply 方法的函数或类，接收 compiler 实例，在其中监听 compilation、emit 等生命周期钩子，通过操作 compilation.assets 等对象定制构建流程，而非处理代码转换。

javascript 中怎么编写自定义 webpack 插件实现打包流程定制

编写自定义 Webpack 插件，核心是实现一个具有 apply 方法的对象或类，并在其中监听 Webpack 生命周期钩子（如 compilation、emit 等），通过操作编译对象或资源来定制打包行为。插件不直接处理代码转换（那是 loader 的事），而是控制构建流程、生成文件、校验、报告等。

插件的基本结构与注册方式

Webpack 插件本质是一个函数或类，必须暴露 apply 方法，该方法接收 compiler 实例作为参数。Webpack 在启动时会调用这个方法，把插件“挂载”到构建流程中。

函数式写法：直接导出一个带 apply 方法的函数
类式写法：推荐使用 ES6 class，构造函数可接收配置，apply 中注册钩子
在 webpack.config.js 的 plugins 数组中 new 实例并传入配置

监听关键生命周期钩子完成定制逻辑

Webpack 提供了同步/异步钩子（如 compilation、emit、done），不同钩子适合不同场景：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

compiler.hooks.run.tap：构建开始前触发，适合初始化检查或准备数据
compilation.hooks.buildModule.tap：每个模块构建时触发，可用于修改模块依赖或元信息
compilation.hooks.processAssets.tapAsync：资产（assets）生成后、写入磁盘前，常用于修改或添加输出文件（Webpack 5+ 推荐用此替代旧的 emit 钩子）
compiler.hooks.done.tap：整个构建完成后触发，适合打印统计、发送通知、清理临时文件

在 assets 上添加或修改输出文件

想在 dist 目录里多生成一个 manifest.json 或注入版本号？可在 processAssets 钩子中操作 compilation.assets 对象：

compilation.assets 是一个 Map-like 对象，key 是文件路径（如 'main.js'），value 是 source() 返回字符串内容的 Source 对象
用 compilation.emitAsset('filename', new RawSource('content')) 添加新文件（Webpack 5+）
修改已有文件：先读取 compilation.assets['xxx'].source()，处理后再重新 emitAsset
注意避免覆盖已有 asset，建议检查 key 是否已存在

处理异步逻辑与错误提示

如果插件需要读文件、请求 API 或做耗时计算，必须使用异步钩子（如 tapAsync 或 tapPromise），并正确调用回调或返回 Promise：

用 tapAsync：第三个参数是 callback，执行完需调用 callback() 或 callback(err)
用 tapPromise：返回 Promise，reject 会中断构建并报错
主动抛错：在钩子中 throw new Error('...') 会终止构建并显示错误堆栈
友好提示：可通过 compilation.warnings.push(...) 或 compilation.errors.push(...) 添加构建警告或错误