Compilation
模块由 Compiler
用于创建新的编译(或构建)。compilation
实例可以访问所有模块及其依赖项(其中大多数是循环引用)。它是应用程序依赖关系图中所有模块的字面编译。在编译阶段,模块被加载、密封、优化、分块、哈希和恢复。
Compilation
类还扩展了 Tapable
并提供以下生命周期钩子。它们可以像编译器钩子一样被点击
compilation.hooks.someHook.tap(/* ... */);
与 compiler
一样,tapAsync
和 tapPromise
也可能根据钩子的类型而可用。
SyncHook
在模块构建开始之前触发,可用于修改模块。
module
compilation.hooks.buildModule.tap(
'SourceMapDevToolModuleOptionsPlugin',
(module) => {
module.useSourceMap = true;
}
);
SyncHook
在重建模块之前触发。
module
SyncHook
模块构建失败时运行。
module
error
SyncHook
模块构建成功时执行。
module
AsyncSeriesHook
所有模块构建完成且无错误时调用。
modules
SyncHook
模块重建完成时执行,无论成功还是失败。
module
SyncHook
编译停止接受新模块时触发。
SyncHook
编译开始接受新模块时触发。
SyncBailHook
在依赖优化开始时触发。
modules
SyncHook
依赖优化完成后触发。
modules
SyncHook
afterChunks
钩子在创建块和模块图之后,优化之前调用。此钩子提供了一个机会来检查、分析和修改块图,如果需要。
以下是一个示例,说明如何使用 compilation.hooks.afterChunks
钩子。
chunks
SyncHook
在优化阶段开始时触发。
SyncBailHook
在模块优化阶段开始时调用。插件可以利用此钩子对模块执行优化。
modules
SyncHook
模块优化完成后调用。
modules
SyncBailHook
在块优化阶段开始时调用。插件可以利用此钩子对块执行优化。
chunks
SyncHook
块优化完成后触发。
chunks
AsyncSeriesHook
在优化依赖树之前调用。插件可以利用此钩子执行依赖树优化。
chunks
modules
SyncHook
依赖树优化成功完成后调用。
chunks
modules
SyncBailHook
在树优化之后,在块模块优化开始时调用。插件可以利用此钩子执行块模块的优化。
chunks
modules
SyncHook
块模块优化成功完成后调用。
chunks
modules
SyncBailHook
调用以确定是否存储记录。返回任何!== false
的值将阻止所有其他“记录”钩子执行(record
,recordModules
,recordChunks
和 recordHash
)。
SyncHook
从记录中恢复模块信息。
modules
records
SyncHook
在为每个模块分配id
之前执行。
modules
SyncHook
用于为每个模块分配id
。
modules
SyncHook
在模块id
优化阶段开始时调用。
modules
SyncHook
模块id
优化阶段完成后调用。
modules
SyncHook
从记录中恢复块信息。
chunks
records
SyncHook
在为每个块分配id
之前执行。
chunks
SyncHook
用于为每个块分配id
。
chunks
SyncHook
在块id
优化阶段开始时调用。
chunks
SyncHook
块id
优化完成后触发。
chunks
SyncHook
将模块信息存储到记录中。如果shouldRecord
返回真值,则会触发此操作。
modules
records
SyncHook
将块信息存储到记录中。仅当shouldRecord
返回真值时才会触发此操作。
chunks
records
SyncHook
在模块被哈希之前调用。
syncHook
模块被哈希后调用。
SyncHook
在编译被哈希之前调用。
SyncHook
在编译哈希后调用。
SyncHook
将记录哈希信息存储到 records
中。仅当 shouldRecord
返回真值时才会触发。
records
SyncHook
将 compilation
信息存储到 records
中。仅当 shouldRecord
返回真值时才会触发。
compilation
records
SyncHook
在创建模块资产之前执行。
SyncHook
为块创建额外的资产。
chunks
SyncBailHook
用于确定是否生成块资产。返回任何 !== false
的值将允许生成块资产。
SyncHook
在创建块资产之前执行。
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')
);
}
});
});
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();
}
);
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),
});
});
});
AsyncSeriesHook
优化存储在compilation.assets
中的所有资产。
assets
SyncHook
资产已优化。
assets
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`);
});
}
);
除了name
和stage
之外,您还可以传递一个additionalAssets
5.8.0+选项,它接受true
值或接收assets
作为第一个参数的回调函数
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
}
);
(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"
});
}
);
SyncHook
在 processAssets
钩子完成且无错误后调用。
SyncBailHook
调用以确定编译是否需要取消密封以包含其他文件。
AsyncSeriesHook
在 needAdditionalSeal
之后立即执行。
SyncHook
触发以发出每个块的哈希值。
chunk
chunkHash
SyncHook
当从模块添加资产到编译时调用。
module
filename
SyncHook
当从块添加资产到编译时触发。
chunk
filename
SyncWaterfallHook
调用以确定资产的路径。
path
options
SyncBailHook
调用以确定资产在发出后是否需要进一步处理。
SyncHook
在设置子编译器后执行。
childCompiler
compilerName
compilerIndex
从 webpack v5 开始,normalModuleLoader
钩子已删除。现在要访问加载器,请使用 NormalModule.getCompilationHooks(compilation).loader
代替。