说明
玩转 webpack 学习笔记
插件中如何获取传递的参数?
通过插件的构造函数进行获取
module.exports = class MyPlugin { constructor(options) { this.options = options; } apply() { console.log("apply", this.options); } };
插件的错误处理
参数校验阶段可以直接 throw 的方式抛出
throw new Error("Error Message")
通过 compilation 对象的 warnings 和 errors 接收
compilation.warnings.push("warning"); compilation.errors.push("error");
通过 Compilation 进行文件写入
Compilation 上的 assets 可以用于文件写入
- 可以将 zip 资源包设置到 compilation.assets 对象上
文件写入需要使用 webpack-sources:https://github.com/webpack/webpack-sources
const { RawSource } = require("webpack-sources"); module.exports = class DemoPlugin { constructor(options) { this.options = options; } apply(compiler) { const { name } = this.options; compiler.plugin("emit", (compilation, cb) => { compilation.assets[name] = new RawSource("demo"); cb(); }); } };
插件扩展:编写插件的插件
插件自身也可以通过暴露 hooks 的方式进行自身扩展,以 html- webpack-plugin 为例:
html-webpack-plugin-alter-chunks (Sync)
html-webpack-plugin-before-html-generation (Async)
html-webpack-plugin-alter-asset-tags (Async)
html-webpack-plugin-after-html-processing (Async)
html-webpack-plugin-after-emit (Async)
在插件的事件节点进行监听,一旦执行到就可以根据获取到的资源进行处理。