说明
玩转 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,) => {
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)
在插件的事件节点进行监听,一旦执行到就可以根据获取到的资源进行处理。