11. plugin

边界: webpack编译期间,注册函数,干预webpack的打包过程

loader 的功能定位是转换代码,而一些其他的操作难以用loader来完成
如:

• 当webpack生成文件的时,顺便多生成一个说明描述文件
• 当webpack编译启动的时候,控制台输出一句话表示webpak启动了
• 当xxx时,xxxx

这种类似的功能需要把功能嵌入到webpack的编译流程中,而这种事情的实现依托于plugin

plugin的本质是一个带有apply方法的对象

var plugin={
  apply:function(compiler){
    }
}

通常,习惯上,我们会将该函数写成构造函数的模式

class MyPlugin{
  apply(complier)
}
var plugin=new MyPlugin();

要将插件应用到webpack中,需要把对象配置到webpack的plugins的数组,如下

module.exports={
    plugins:[new MyPlugin()]
}

compiler对象是初始化阶段构建的,整个webpack打包期间只有一个compiler对象,后续完成打包的工作是compiler对象内部创建的compilation
apply方法会在创建好complier对象后调用,并向方法传入一个compiler对象

compiler对象提供了大量的钩子函数(hooks,可以理解为事件),plugin的开发者可以注册这些钩子函数,参与webpack编译和生成

class MyPlugin{
    apply(compiler){
    compiler.hooks.事件名称.事件类型(name,function(){
        //事件处理函数
    })
    }
}

事件名称

即要监听的事件名,即钩子名,所有的钩子
https://www.webpackjs.com/api/compiler-hooks

事件类型

这一部分使用的是Tapable Api,这个小型库是一个专门用于钩子函数监听的库

它提供了一些事件类型

• tap: 注册一个同步的钩子函数,函数运行完毕则表示事件处理结束
• tapAsync: 注册一个基于回调的异步钩子函数,函数通过调用一个回调表示事件处理结束
• tapPromise: 注册一个基于Promise的异步钩子函数,函数通过返回的Promise进入已决状态表示事件处理结束

处理函数

处理函有一个事件参数 comilation

demo 生成资源后,额外添加一个文件列表

module.exports = class FileListPlugin {
    constructor(filename = "filelist.txt"){
        this.filename = filename;
    }
    apply(compiler) {
        compiler.hooks.emit.tap("FileListPlugin", complation => {
            var fileList = [];
            for (const key in complation.assets) {
                var content = `【${key}】
大小：${complation.assets[key].size()/1000}KB`;
                fileList.push(content);
            }
            var str = fileList.join("\n\n");
            complation.assets[this.filename] = {
                source() {
                    return str
                },
                size() {
                    return str.length;
                }
            }
        })
    }
}