webpack-hooks 说明

1. Hooks的基本概念

// Hooks是webpack提供的事件机制
// 允许在webpack编译过程中的特定时机执行自定义代码
// 基于Tapable库实现，支持同步和异步操作

2. Hooks的类型

// 同步Hook
compiler.hooks.someHook.tap('PluginName', (params) => {
  // 同步处理
});

// 异步Hook
compiler.hooks.someHook.tapAsync('PluginName', (params, callback) => {
  // 异步处理
  callback();
});

// Promise Hook
compiler.hooks.someHook.tapPromise('PluginName', async (params) => {
  // Promise处理
  await someAsyncOperation();
});

3. 常用的Compiler Hooks

// 编译开始前
compiler.hooks.beforeRun.tap('PluginName', (compiler) => {
  console.log('编译开始前');
});

// 编译完成后
compiler.hooks.done.tap('PluginName', (stats) => {
  console.log('编译完成');
});

// 编译过程中
compiler.hooks.compilation.tap('PluginName', (compilation) => {
  console.log('编译过程中');
});

// 资源生成后
compiler.hooks.emit.tap('PluginName', (compilation) => {
  console.log('资源生成后');
});

4. 常用的Compilation Hooks

// 模块构建前
compilation.hooks.buildModule.tap('PluginName', (module) => {
  console.log('模块构建前');
});

// 资源生成前
compilation.hooks.beforeModuleAssets.tap('PluginName', () => {
  console.log('资源生成前');
});

// 资源生成后
compilation.hooks.afterModuleAssets.tap('PluginName', (module) => {
  console.log('资源生成后');
});

5. Hooks的执行顺序

// 按照注册顺序执行
compiler.hooks.someHook
  .tap('Plugin1', () => console.log('Plugin1'))
  .tap('Plugin2', () => console.log('Plugin2'))
  .tap('Plugin3', () => console.log('Plugin3'));

// 使用bail控制执行流程
compiler.hooks.someHook
  .bail
  .tap('Plugin1', () => {
    // 如果返回非undefined，后续hooks不会执行
    return someValue;
  });

6. 实际应用场景

// 1. 修改webpack配置
compiler.hooks.afterEnvironment.tap('PluginName', () => {
  // 修改webpack配置
});

// 2. 处理资源
compiler.hooks.emit.tapAsync('PluginName', (compilation, callback) => {
  // 处理编译后的资源
  callback();
});

// 3. 添加自定义功能
compiler.hooks.compilation.tap('PluginName', (compilation) => {
  // 添加自定义功能
});

// 4. 优化构建
compiler.hooks.optimize.tap('PluginName', () => {
  // 优化构建过程
});

7. 常用Hook的生命周期

// 编译生命周期
compiler.hooks.beforeRun.tap('PluginName', () => {
  // 编译开始前
});

compiler.hooks.run.tap('PluginName', () => {
  // 编译开始
});

compiler.hooks.watchRun.tap('PluginName', () => {
  // 监听模式下的编译开始
});

compiler.hooks.normalModuleFactory.tap('PluginName', () => {
  // 创建模块工厂
});

compiler.hooks.contextModuleFactory.tap('PluginName', () => {
  // 创建上下文模块工厂
});

compiler.hooks.beforeCompile.tap('PluginName', () => {
  // 编译前
});

compiler.hooks.compile.tap('PluginName', () => {
  // 编译中
});

compiler.hooks.thisCompilation.tap('PluginName', () => {
  // 创建compilation
});

compiler.hooks.compilation.tap('PluginName', () => {
  // compilation创建完成
});

compiler.hooks.make.tap('PluginName', () => {
  // 构建模块
});

compiler.hooks.afterCompile.tap('PluginName', () => {
  // 编译完成
});

compiler.hooks.shouldEmit.tap('PluginName', () => {
  // 是否应该输出资源
});

compiler.hooks.emit.tap('PluginName', () => {
  // 输出资源
});

compiler.hooks.afterEmit.tap('PluginName', () => {
  // 输出资源后
});

compiler.hooks.done.tap('PluginName', () => {
  // 完成
});

8. 调试技巧

// 1. 使用console.log
compiler.hooks.someHook.tap('PluginName', (params) => {
  console.log('Hook参数:', params);
});

// 2. 使用debugger
compiler.hooks.someHook.tap('PluginName', (params) => {
  debugger;
});

// 3. 使用tapAsync进行异步调试
compiler.hooks.someHook.tapAsync('PluginName', (params, callback) => {
  setTimeout(() => {
    console.log('异步调试');
    callback();
  }, 1000);
});

9. 最佳实践

• 选择合适的hook时机
• 注意异步操作的处理
• 做好错误处理
• 保持代码简洁
• 添加适当的注释
• 考虑性能影响

10. 常见问题

// 1. Hook未触发
compiler.hooks.someHook.tap('PluginName', () => {
  // 检查hook名称是否正确
  // 检查hook注册时机
});

// 2. 异步操作处理
compiler.hooks.someHook.tapAsync('PluginName', (params, callback) => {
  // 确保调用callback
  // 处理错误情况
});

// 3. 性能问题
compiler.hooks.someHook.tap('PluginName', () => {
  // 避免在hook中进行大量计算
  // 使用缓存
});

总结

使用webpack hooks时需要注意：

1. 选择合适的hook时机
2. 正确处理异步操作
3. 注意执行顺序
4. 做好错误处理
5. 考虑性能影响
6. 保持代码简洁
7. 添加适当注释
8. 遵循最佳实践