webpack插件开发备注

在 Webpack 插件开发中，apply 方法是插件的核心入口。每个 Webpack 插件都是一个包含 apply 方法的对象，Webpack 在运行时会调用这个方法，将 Webpack 的编译器（compiler）对象作为参数传递给它，从而允许插件挂载到 Webpack 的事件系统中，并通过钩子影响打包过程。

class MyPlugin {
  apply(compiler) {
    // 注册一个钩子
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      // 在资源输出阶段做点事情
      console.log('This is my plugin!');
      callback();
    });
  }
}

module.exports = MyPlugin;

 

关键生命周期钩子

beforeRun 和 run：

在构建开始之前执行，适合清理工作或初始化操作。

compiler.hooks.beforeRun.tap('MyPlugin', (compiler) => {
  console.log('Webpack build is about to start!');
});

compile 和 compilation：

• compile 是一次新的编译开始时触发。
• compilation 提供了对构建中间数据的访问，比如模块和依赖关系。

compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
  compilation.hooks.optimize.tap('MyPlugin', () => {
    console.log('Assets are being optimized...');
  });
});

emit：

• 在生成文件到输出目录之前触发，适合修改或添加输出文件。

compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
  compilation.assets['new-file.txt'] = {
    source: () => 'This is the content of the new file.',
    size: () => 27,
  };
  callback();
});

done：

• 构建完成后触发，适合进行日志记录或清理工作。

compiler.hooks.done.tap('MyPlugin', (stats) => {
  console.log('Build is done!');
});