webpack原理篇（六十四）：更复杂的插件开发场景

Posted 2022-08-31 凯小默

说明

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

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