plugin

loader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如：

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

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

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

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

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

class MyPlugin{
    apply(compiler){

    }
}

var plugin = new MyPlugin();

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

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

apply函数会在初始化阶段，创建好Compiler对象后运行。（也就是初始化的时候就运行了）

compiler对象是在初始化阶段构建的，整个webpack打包期间只有一个compiler对象，后续完成打包工作的是compiler对象内部创建的compilation来完成

apply方法会在创建好compiler对象后调用，并向方法传入一个compiler对象

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

你可以在apply方法中使用下面的代码注册钩子函数:

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

事件名称

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

事件类型

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

它提供了一些事件类型：

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

处理函数

处理函数有一个事件参数compilation

启动监听watch的时候，会从编译阶段开始，因此会重新创建一个compilation，compiler不会重新创建只会有一个

compilation钩子需要通过compiler的钩子再注册compilation钩子

class MyPlugin {
  apply(compiler) {
    // 方式1：通过 compiler.compilation 钩子
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      
      // 监听构建模块
      compilation.hooks.buildModule.tap('MyPlugin', (module) => {
        console.log('开始构建模块:', module.request || module.name);
      });
      
      // 监听模块构建完成
      compilation.hooks.succeedModule.tap('MyPlugin', (module) => {
        console.log('模块构建完成:', module.request || module.name);
      });
      
      // 监听优化阶段
      compilation.hooks.optimize.tap('MyPlugin', () => {
        console.log('开始优化阶段');
      });
      
      // 监听 chunk 资产生成
      compilation.hooks.processAssets.tapPromise({
        name: 'MyPlugin',
        stage: compilation.constructor.PROCESS_ASSETS_STAGE_ADDITIONAL,
      }, async (assets) => {
        // 处理生成的 assets
        console.log('Assets:', Object.keys(assets));
      });
      
      // 监听资源处理
      compilation.hooks.afterOptimizeChunkAssets.tap('MyPlugin', (chunks) => {
        console.log('Chunks 优化完成，数量:', chunks.length);
      });
    });
    
    // 方式2：通过特定阶段钩子
    compiler.hooks.thisCompilation.tap('MyPlugin', (compilation) => {
      // 只在当前 compilation 触发
    });
  }
}

plugin ​

plugin