0
点赞
收藏
分享

微信扫一扫

webpack原理篇(六十四):更复杂的插件开发场景


说明

玩转 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)

在插件的事件节点进行监听,一旦执行到就可以根据获取到的资源进行处理。


举报

相关推荐

0 条评论