一、自定义插件

{
  apply(compiler) {
    compiler.hooks.emit.tap('ReplaceRequires', (compilation) => {
      const replaceMap = {
        'vue': 'vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios',
        'lodash': '_',
        'element-ui': 'ELEMENT',
        'moment': 'moment'
      }
      
      for (const filename in compilation.assets) {
        if (filename.endsWith('.js')) {
          let source = compilation.assets[filename].source()
          
          Object.entries(replaceMap).forEach(([pkg, variable]) => {
            const regex1 = new RegExp(`require\\("${pkg}"\\)`, 'g')
            const regex2 = new RegExp(`require\\('${pkg}'\\)`, 'g')
            source = source.replace(regex1, variable)
            source = source.replace(regex2, variable)
          })
          
          compilation.assets[filename] = {
            source: () => source,
            size: () => source.length
          }
        }
      }
    })
  }
}

1. apply 方法的作用

基本作用

apply 方法是 webpack 插件的入口点。当 webpack 启动时，会调用所有插件的 apply 方法。

执行时机

时机: webpack 启动阶段，在读取配置后、开始编译前
调用者: webpack 编译器（compiler）
参数: webpack 的 compiler 实例

代码示例

class MyPlugin {
  apply(compiler) {
    // 在这里注册各种钩子
    console.log('插件被应用了！')
  }
}

// webpack 内部大致这样调用：
const compiler = new Compiler()
plugins.forEach(plugin => {
  plugin.apply(compiler)  // 这里调用 apply 方法
})

2. compiler.hooks.emit.tap 的作用

Compiler Hooks 系统

webpack 使用 Tapable 库实现钩子系统，整个构建过程被分为多个阶段：

初始化 → 编译 → 生成资源 → 输出 → 完成

emit 钩子的位置

environment → afterEnvironment → beforeRun → run → beforeCompile → compile → 
thisCompilation → compilation → make → afterCompile → 
shouldEmit → emit → afterEmit → done

emit 钩子的特点

时机: 在资源生成后，写入文件系统之前
参数: compilation 对象（包含所有编译资源）
用途: 修改最终输出的文件内容

执行流程

compiler.hooks.emit.tap('插件名称', (compilation) => {
  // 这个回调函数在 emit 阶段执行
  // compilation.assets 包含所有要输出的文件
})

3. 完整的执行时序

// 1. webpack 启动
const webpack = require('webpack')
const config = require('./webpack.config.js')

// 2. 创建 compiler
const compiler = webpack(config)

// 3. webpack 内部调用插件的 apply 方法
//    ↓↓↓ 执行 apply(compiler) ↓↓↓

// 4. webpack 开始编译流程
compiler.run((err, stats) => {
  // 编译完成后的回调
})

// 编译过程中的钩子调用顺序：
// beforeRun → run → beforeCompile → compile → 
// 编译模块... → 
// afterCompile → shouldEmit → 
// ↓↓↓ 执行 emit 钩子 ↓↓↓
// emit → afterEmit → done

4. compilation.assets 结构

compilation.assets 是一个对象，包含所有要输出的文件：

在新版 webpack 中，Compilation.assets 在 emit 阶段已经被冻结，不能直接修改。如果想要修改需要在更早的钩子中进行资源处理。eg：compiler.hooks.compilation.tap("ReplaceRequiresPlugin"

{
  'dist/my-component.js': {
    source: function() { return '生成的JS代码...' },
    size: function() { return 1024 }
  },
  'dist/my-component.css': {
    source: function() { return '生成的CSS代码...' },
    size: function() { return 512 }
  }
}

5.其他相关钩子

apply(compiler) {
  // 编译开始时
  compiler.hooks.compile.tap('MyPlugin', (params) => {
    console.log('开始编译')
  })
  
  // 编译创建时
  compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
    console.log('创建新的编译')
  })
  
  // 生成资源时（推荐使用这个）
  compiler.hooks.emit.tap('MyPlugin', (compilation) => {
    console.log('准备生成文件')
  })
  
  // 文件写入后
  compiler.hooks.afterEmit.tap('MyPlugin', (compilation) => {
    console.log('文件已写入')
  })
}

二、webpack compiler 和 compilation区别

1. Compiler（编译器）

定义：
compiler 是 Webpack 的全局编译器对象，代表了整个 Webpack 编译过程的生命周期。它在 Webpack 启动时创建，且全局唯一，直到编译结束才会被销毁。

作用：

保存了 Webpack 的配置信息（如 entry、output、module、plugins 等）。
提供了 Webpack 生命周期中所有钩子函数（如 entryOption、run、compile、emit、done 等），用于在编译的不同阶段执行自定义逻辑。
负责统筹整个编译流程，触发各个阶段的钩子，并创建 compilation 对象。

获取方式：

在 Webpack 插件中，通过 apply(compiler) 方法的参数获取。
在配置文件的 plugins 中，自定义插件函数的 this 指向 compiler（如前文示例中的 this.hooks.emit）。

2. Compilation（编译实例）

定义：
compilation 是单次编译过程的实例对象，代表了一次具体的编译过程（从入口文件解析到输出资源生成的完整流程）。