编译钩子

Compilation 模块由 Compiler 用于创建新的编译(或构建)。compilation 实例可以访问所有模块及其依赖项(其中大多数是循环引用)。它是应用程序依赖关系图中所有模块的字面编译。在编译阶段,模块被加载、密封、优化、分块、哈希和恢复。

Compilation 类还扩展了 Tapable 并提供以下生命周期钩子。它们可以像编译器钩子一样被点击

compilation.hooks.someHook.tap(/* ... */);

compiler 一样,tapAsynctapPromise 也可能根据钩子的类型而可用。

buildModule

SyncHook

在模块构建开始之前触发,可用于修改模块。

  • 回调参数:module
compilation.hooks.buildModule.tap(
  'SourceMapDevToolModuleOptionsPlugin',
  (module) => {
    module.useSourceMap = true;
  }
);

rebuildModule

SyncHook

在重建模块之前触发。

  • 回调参数:module

failedModule

SyncHook

模块构建失败时运行。

  • 回调参数:module error

succeedModule

SyncHook

模块构建成功时执行。

  • 回调参数:module

finishModules

AsyncSeriesHook

所有模块构建完成且无错误时调用。

  • 回调参数:modules

finishRebuildingModule

SyncHook

模块重建完成时执行,无论成功还是失败。

  • 回调参数:module

seal

SyncHook

编译停止接受新模块时触发。

unseal

SyncHook

编译开始接受新模块时触发。

optimizeDependencies

SyncBailHook

在依赖优化开始时触发。

  • 回调参数:modules

afterOptimizeDependencies

SyncHook

依赖优化完成后触发。

  • 回调参数:modules

afterChunks

SyncHook

5.83.0+

afterChunks 钩子在创建块和模块图之后,优化之前调用。此钩子提供了一个机会来检查、分析和修改块图,如果需要。

以下是一个示例,说明如何使用 compilation.hooks.afterChunks 钩子。

  • 回调参数:chunks

optimize

SyncHook

在优化阶段开始时触发。

optimizeModules

SyncBailHook

在模块优化阶段开始时调用。插件可以利用此钩子对模块执行优化。

  • 回调参数:modules

afterOptimizeModules

SyncHook

模块优化完成后调用。

  • 回调参数:modules

optimizeChunks

SyncBailHook

在块优化阶段开始时调用。插件可以利用此钩子对块执行优化。

  • 回调参数:chunks

afterOptimizeChunks

SyncHook

块优化完成后触发。

  • 回调参数:chunks

optimizeTree

AsyncSeriesHook

在优化依赖树之前调用。插件可以利用此钩子执行依赖树优化。

  • 回调参数:chunks modules

afterOptimizeTree

SyncHook

依赖树优化成功完成后调用。

  • 回调参数:chunks modules

optimizeChunkModules

SyncBailHook

在树优化之后,在块模块优化开始时调用。插件可以利用此钩子执行块模块的优化。

  • 回调参数:chunks modules

afterOptimizeChunkModules

SyncHook

块模块优化成功完成后调用。

  • 回调参数:chunks modules

shouldRecord

SyncBailHook

调用以确定是否存储记录。返回任何!== false的值将阻止所有其他“记录”钩子执行(recordrecordModulesrecordChunksrecordHash)。

reviveModules

SyncHook

从记录中恢复模块信息。

  • 回调参数:modules records

beforeModuleIds

SyncHook

在为每个模块分配id之前执行。

  • 回调参数:modules

moduleIds

SyncHook

用于为每个模块分配id

  • 回调参数:modules

optimizeModuleIds

SyncHook

在模块id优化阶段开始时调用。

  • 回调参数:modules

afterOptimizeModuleIds

SyncHook

模块id优化阶段完成后调用。

  • 回调参数:modules

reviveChunks

SyncHook

从记录中恢复块信息。

  • 回调参数:chunks records

beforeChunkIds

SyncHook

在为每个块分配id之前执行。

  • 回调参数:chunks

chunkIds

SyncHook

用于为每个块分配id

  • 回调参数:chunks

optimizeChunkIds

SyncHook

在块id优化阶段开始时调用。

  • 回调参数:chunks

afterOptimizeChunkIds

SyncHook

id优化完成后触发。

  • 回调参数:chunks

recordModules

SyncHook

将模块信息存储到记录中。如果shouldRecord返回真值,则会触发此操作。

  • 回调参数:modules records

recordChunks

SyncHook

将块信息存储到记录中。仅当shouldRecord返回真值时才会触发此操作。

  • 回调参数:chunks records

beforeModuleHash

SyncHook

在模块被哈希之前调用。

afterModuleHash

syncHook

模块被哈希后调用。

beforeHash

SyncHook

在编译被哈希之前调用。

afterHash

SyncHook

在编译哈希后调用。

recordHash

SyncHook

将记录哈希信息存储到 records 中。仅当 shouldRecord 返回真值时才会触发。

  • 回调参数:records

record

SyncHook

compilation 信息存储到 records 中。仅当 shouldRecord 返回真值时才会触发。

  • 回调参数:compilation records

beforeModuleAssets

SyncHook

在创建模块资产之前执行。

additionalChunkAssets

SyncHook

为块创建额外的资产。

  • 回调参数:chunks

shouldGenerateChunkAssets

SyncBailHook

用于确定是否生成块资产。返回任何 !== false 的值将允许生成块资产。

beforeChunkAssets

SyncHook

在创建块资产之前执行。

additionalAssets

AsyncSeriesHook

为编译创建额外的资产。此钩子可用于下载图像,例如。

compilation.hooks.additionalAssets.tapAsync('MyPlugin', (callback) => {
  download('https://img.shields.io/npm/v/webpack.svg', function (resp) {
    if (resp.status === 200) {
      compilation.assets['webpack-version.svg'] = toAsset(resp);
      callback();
    } else {
      callback(
        new Error('[webpack-example-plugin] Unable to download the image')
      );
    }
  });
});

optimizeChunkAssets

AsyncSeriesHook

优化任何块资产。这些资产存储在compilation.assets中。一个Chunk有一个属性files,它指向由一个块创建的所有文件。任何额外的块资产都存储在compilation.additionalChunkAssets中。

  • 回调参数:chunks

以下是一个为每个块添加横幅的示例。

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

    callback();
  }
);

afterOptimizeChunkAssets

SyncHook

块资产已优化。

  • 回调参数:chunks

以下来自@boopathi的示例插件,它精确地输出每个块中的内容。

compilation.hooks.afterOptimizeChunkAssets.tap('MyPlugin', (chunks) => {
  chunks.forEach((chunk) => {
    console.log({
      id: chunk.id,
      name: chunk.name,
      includes: chunk.getModules().map((module) => module.request),
    });
  });
});

optimizeAssets

AsyncSeriesHook

优化存储在compilation.assets中的所有资产。

  • 回调参数:assets

afterOptimizeAssets

SyncHook

资产已优化。

  • 回调参数:assets

processAssets

AsyncSeriesHook

资产处理。

钩子参数

  • name: string — 插件的名称
  • stage: Stage — 要插入的阶段(请参阅下面的支持的阶段列表
  • additionalAssets?: true | (assets, [callback]) => (void | Promise<void>) — 额外资产的回调(见下文

回调参数

  • assets: { [pathname: string]: Source } — 一个普通对象,其中键是资产的路径名,值是资产数据,由Source表示。

示例

compilation.hooks.processAssets.tap(
  {
    name: 'MyPlugin',
    stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // see below for more stages
  },
  (assets) => {
    console.log('List of assets and their sizes:');
    Object.entries(assets).forEach(([pathname, source]) => {
      console.log(`${pathname}: ${source.size()} bytes`);
    });
  }
);

额外资产

除了namestage之外,您还可以传递一个additionalAssets 5.8.0+选项,它接受true值或接收assets作为第一个参数的回调函数

  1. true — 针对后来由插件添加的资产再次运行提供的回调。

    在此模式下,回调函数将被多次调用:一次用于在指定阶段之前添加的资产,以及在后续阶段(本阶段或下一阶段)由插件添加的资产的额外次数。

    compilation.hooks.processAssets.tap(
      {
        name: 'MyPlugin',
        stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
        additionalAssets: true,
      },
      (assets) => {
        // this function will be called multiple times with each bulk of assets
      }
    );
  2. (assets, [callback]) => (void | Promise<void>) — 对后续阶段(本阶段或下一阶段)由插件添加的资产运行指定的回调函数。回调函数必须尊重所用 tap 方法的类型(例如,当与 tapPromise() 一起使用时,它应该返回一个 promise)。

    compilation.hooks.processAssets.tap(
      {
        name: 'MyPlugin',
        stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
        additionalAssets: (assets) => {
          // this function potentially could be called multiple times for assets added on later stages
        },
      },
      (assets) => {
        // this function will be called once with assets added by plugins on prior stages
      }
    );

资产处理阶段列表

以下是支持的阶段列表(按处理顺序排列)

  • PROCESS_ASSETS_STAGE_ADDITIONAL — 向编译添加额外的资产。
  • PROCESS_ASSETS_STAGE_PRE_PROCESS — 对资产进行基本预处理。
  • PROCESS_ASSETS_STAGE_DERIVED — 从现有资产派生新的资产。
  • PROCESS_ASSETS_STAGE_ADDITIONS — 向现有资产添加额外的部分,例如横幅或初始化代码。
  • PROCESS_ASSETS_STAGE_OPTIMIZE — 以一般方式优化现有资产。
  • PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT — 优化现有资产的数量,例如通过合并它们。
  • PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY — 优化现有资产的兼容性,例如添加 polyfills 或供应商前缀。
  • PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE — 优化现有资产的大小,例如通过最小化或省略空格。
  • PROCESS_ASSETS_STAGE_DEV_TOOLING — 向资产添加开发工具,例如通过提取源映射。
  • PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE 5.8.0+ — 优化现有资产的数量,例如通过将资产内联到其他资产中。
  • PROCESS_ASSETS_STAGE_SUMMARIZE — 总结现有资产列表。
  • PROCESS_ASSETS_STAGE_OPTIMIZE_HASH — 优化资产的哈希值,例如通过生成资产内容的真实哈希值。
  • PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER — 优化现有资产的传输,例如通过准备压缩(gzip)文件作为单独的资产。
  • PROCESS_ASSETS_STAGE_ANALYSE — 分析现有资产。
  • PROCESS_ASSETS_STAGE_REPORT — 创建用于报告目的的资产。

资产信息

此钩子不会自动提供“资产信息”元数据。如果需要,您必须使用编译实例和提供的资产路径手动解析此元数据。这将在 webpack 的未来版本中得到改进。

示例

compilation.hooks.processAssets.tap(
  {
    /** … */
  },
  (assets) => {
    Object.entries(assets).forEach(([pathname, source]) => {
      const assetInfo = compilation.assetsInfo.get(pathname);
      // @todo: do something with "pathname", "source" and "assetInfo"
    });
  }
);

afterProcessAssets

SyncHook

processAssets 钩子完成且无错误后调用。

needAdditionalSeal

SyncBailHook

调用以确定编译是否需要取消密封以包含其他文件。

afterSeal

AsyncSeriesHook

needAdditionalSeal 之后立即执行。

chunkHash

SyncHook

触发以发出每个块的哈希值。

  • 回调参数:chunk chunkHash

moduleAsset

SyncHook

当从模块添加资产到编译时调用。

  • 回调参数:module filename

chunkAsset

SyncHook

当从块添加资产到编译时触发。

  • 回调参数:chunk filename

assetPath

SyncWaterfallHook

调用以确定资产的路径。

  • 回调参数:path options

needAdditionalPass

SyncBailHook

调用以确定资产在发出后是否需要进一步处理。

childCompiler

SyncHook

在设置子编译器后执行。

  • 回调参数:childCompiler compilerName compilerIndex

normalModuleLoader

从 webpack v5 开始,normalModuleLoader 钩子已删除。现在要访问加载器,请使用 NormalModule.getCompilationHooks(compilation).loader 代替。

9 位贡献者

slavafominbyzykmadhavarshneymisterdevwizardofhogwartsEugeneHlushkochenxsanjamesgeorge007snitin315