构建生命周期钩子

构建生命周期钩子

Webpack 的构建生命周期钩子允许开发者在编译过程的不同阶段插入自定义逻辑。这些钩子通过 compiler 和 compilation 对象暴露，覆盖了从初始化到资源输出的完整流程。理解这些钩子的触发时机和用途，能够实现高级定制化构建流程。

compiler 钩子

compiler 对象代表完整的 Webpack 环境配置，其生命周期钩子贯穿整个构建过程。以下为关键阶段示例：

compiler.hooks.beforeRun.tap('MyPlugin', (compiler) => {
  console.log('在开始执行构建前触发');
});

compiler.hooks.compile.tap('MyPlugin', (params) => {
  console.log('创建新 compilation 前触发');
});

compiler.hooks.done.tap('MyPlugin', (stats) => {
  console.log('构建完成时触发');
});

beforeRun 钩子在读取配置后立即执行，适合初始化第三方工具。emit 阶段允许修改最终资源：

compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
  compilation.assets['license.txt'] = {
    source: () => 'MIT License',
    size: () => 10
  };
  callback();
});

compilation 钩子

compilation 对象处理模块依赖图的构建过程，其钩子提供更细粒度控制：

compilation.hooks.buildModule.tap('MyPlugin', (module) => {
  console.log(`开始构建模块: ${module.identifier()}`);
});

compilation.hooks.succeedModule.tap('MyPlugin', (module) => {
  console.log(`模块构建成功: ${module.resource}`);
});

资源优化阶段可通过 optimizeChunkAssets 修改分块内容：

compilation.hooks.optimizeChunkAssets.tapAsync('MyPlugin', (chunks, callback) => {
  chunks.forEach(chunk => {
    chunk.files.forEach(file => {
      compilation.assets[file] = new ConcatSource(
        '/** 自定义头 **/\n',
        compilation.assets[file]
      );
    });
  });
  callback();
});

异步与同步钩子

Webpack 钩子分为同步（SyncHook）、异步串行（AsyncSeriesHook）和异步并行（AsyncParallelHook）三种类型。异步钩子需使用 tapAsync 或 tapPromise：

// 异步串行示例
compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
  setTimeout(() => {
    console.log('延迟操作');
    callback();
  }, 1000);
});

// Promise 示例
compiler.hooks.emit.tapPromise('MyPlugin', (compilation) => {
  return new Promise(resolve => {
    fs.writeFile('build.log', '构建日志', resolve);
  });
});

实战案例：资源分析插件

通过组合多个钩子实现构建资源分析功能：

class AnalyzePlugin {
  apply(compiler) {
    const stats = { 
      entryPoints: new Set(),
      modules: new Map()
    };

    compiler.hooks.compilation.tap('AnalyzePlugin', (compilation) => {
      compilation.hooks.addEntry.tap('AnalyzePlugin', (entry) => {
        stats.entryPoints.add(entry.name);
      });

      compilation.hooks.succeedModule.tap('AnalyzePlugin', (module) => {
        stats.modules.set(module.id, {
          size: module.size(),
          deps: Array.from(module.dependencies).map(dep => dep.module?.id)
        });
      });
    });

    compiler.hooks.done.tap('AnalyzePlugin', () => {
      fs.writeFileSync('stats.json', JSON.stringify(stats, null, 2));
    });
  }
}

钩子执行顺序

典型构建流程的钩子触发顺序如下：

1. environment：环境准备
2. afterEnvironment：环境配置完成
3. beforeRun：构建启动前
4. run：开始读取记录
5. beforeCompile：编译参数创建
6. compile：新编译创建
7. thisCompilation：compilation 初始化
8. compilation：compilation 完成
9. make：模块依赖分析
10. afterCompile：编译结束
11. emit：资源生成到目录
12. afterEmit：资源写入完成
13. done：构建结束

自定义钩子

插件开发者可通过 tapable 创建新钩子：

const { SyncHook } = require('tapable');

class MyPlugin {
  constructor() {
    this.hooks = {
      intercept: new SyncHook(['context'])
    };
  }

  apply(compiler) {
    compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
      this.hooks.intercept.call(compilation);
    });
  }
}

性能优化技巧

高频触发的钩子（如 seal）应避免复杂计算：

// 使用 WeakMap 缓存计算结果
const cache = new WeakMap();

compilation.hooks.seal.tap('OptimizePlugin', (compilation) => {
  if (!cache.has(compilation)) {
    const result = heavyCalculation(compilation);
    cache.set(compilation, result);
  }
  return cache.get(compilation);
});