The Compilation
module is used by the Compiler
to create new compilations
(or builds). A compilation
instance has access to all modules and their
dependencies (most of which are circular references). It is the literal
compilation of all the modules in the dependency graph of an application.
During the compilation phase, modules are loaded, sealed, optimized, chunked,
hashed and restored.
The Compilation
class also extends Tapable
and provides the following
lifecycle hooks. They can be tapped the same way as compiler hooks:
compilation.hooks.someHook.tap(/* ... */);
As with the compiler
, tapAsync
and tapPromise
may also be available
depending on the type of hook.
buildModule
SyncHook
Triggered before a module build has started, can be used to modify the module.
module
compilation.hooks.buildModule.tap(
'SourceMapDevToolModuleOptionsPlugin',
(module) => {
module.useSourceMap = true;
}
);
rebuildModule
SyncHook
Fired before rebuilding a module.
module
failedModule
SyncHook
Run when a module build has failed.
module
error
succeedModule
SyncHook
Executed when a module has been built successfully.
module
finishModules
AsyncSeriesHook
Called when all modules have been built without errors.
modules
finishRebuildingModule
SyncHook
Executed when a module has been rebuilt, in case of both success or with errors.
module
seal
SyncHook
Fired when the compilation stops accepting new modules.
unseal
SyncHook
Fired when a compilation begins accepting new modules.
optimizeDependencies
SyncBailHook
Fired at the beginning of dependency optimization.
modules
afterOptimizeDependencies
SyncHook
Fired after the dependency optimization.
modules
optimize
SyncHook
Triggered at the beginning of the optimization phase.
optimizeModules
SyncBailHook
Called at the beginning of the module optimization phase. A plugin can tap into this hook to perform optimizations on modules.
modules
afterOptimizeModules
SyncHook
Called after modules optimization has completed.
modules
optimizeChunks
SyncBailHook
Called at the beginning of the chunk optimization phase. A plugin can tap into this hook to perform optimizations on chunks.
chunks
afterOptimizeChunks
SyncHook
Fired after chunk optimization has completed.
chunks
optimizeTree
AsyncSeriesHook
Called before optimizing the dependency tree. A plugin can tap into this hook to perform a dependency tree optimization.
chunks
modules
afterOptimizeTree
SyncHook
Called after the dependency tree optimization has completed with success.
chunks
modules
optimizeChunkModules
SyncBailHook
Called after the tree optimization, at the beginning of the chunk modules optimization. A plugin can tap into this hook to perform optimizations of chunk modules.
chunks
modules
afterOptimizeChunkModules
SyncHook
Called after the chunkmodules optimization has completed successfully.
chunks
modules
shouldRecord
SyncBailHook
Called to determine whether or not to store records. Returning anything !== false
will prevent every other "record" hook from being executed (record
, recordModules
, recordChunks
and recordHash
).
reviveModules
SyncHook
Restore module information from records.
modules
records
beforeModuleIds
SyncHook
Executed before assigning an id
to each module.
modules
moduleIds
SyncHook
Called to assign an id
to each module.
modules
optimizeModuleIds
SyncHook
Called at the beginning of the modules id
optimization.
modules
afterOptimizeModuleIds
SyncHook
Called when the modules id
optimization phase has completed.
modules
reviveChunks
SyncHook
Restore chunk information from records.
chunks
records
beforeChunkIds
SyncHook
Executed before assigning an id
to each chunk.
chunks
chunkIds
SyncHook
Called to assign an id
to each chunk.
chunks
optimizeChunkIds
SyncHook
Called at the beginning of the chunks id
optimization phase.
chunks
afterOptimizeChunkIds
SyncHook
Triggered after chunk id
optimization has finished.
chunks
recordModules
SyncHook
Store module info to the records. This is triggered if shouldRecord
returns a truthy value.
modules
records
recordChunks
SyncHook
Store chunk info to the records. This is only triggered if shouldRecord
returns a truthy value.
chunks
records
beforeModuleHash
SyncHook
Called before modules are hashed.
afterModuleHash
syncHook
Called after modules are hashed.
beforeHash
SyncHook
Called before the compilation is hashed.
afterHash
SyncHook
Called after the compilation is hashed.
recordHash
SyncHook
Store information about record hash to the records
. This is only triggered if shouldRecord
returns a truthy value.
records
record
SyncHook
Store information about the compilation
to the records
. This is only triggered if shouldRecord
returns a truthy value.
compilation
records
beforeModuleAssets
SyncHook
Executed before module assets creation.
additionalChunkAssets
SyncHook
Create additional assets for the chunks.
chunks
shouldGenerateChunkAssets
SyncBailHook
Called to determine whether or not generate chunks assets. Returning anything !== false
will allow chunk assets generation.
beforeChunkAssets
SyncHook
Executed before creating the chunks assets.
additionalAssets
AsyncSeriesHook
Create additional assets for the compilation. This hook can be used to download an image, for example:
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
Optimize any chunk assets. The assets are stored in compilation.assets
. A
Chunk
has a property files
which points to all files created by a chunk.
Any additional chunk assets are stored in compilation.additionalChunkAssets
.
chunks
Here's an example that simply adds a banner to each chunk.
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
The chunk assets have been optimized.
chunks
Here's an example plugin from @boopathi that outputs exactly what went into each chunk.
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
Optimize all assets stored in compilation.assets
.
assets
afterOptimizeAssets
SyncHook
The assets have been optimized.
assets
processAssets
AsyncSeriesHook
Asset processing.
assets
Here's an example:
compilation.hooks.processAssets.tap(
{
name: 'MyPlugin',
stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, // see below for more stages
},
(assets) => {
// code here
}
);
In addition to name
and stage
, you can pass a additionalAssets
5.8.0+ option which accepts either a value of true
or a function with assets
as parameter:
true
- Run callback against assets added later by plugins.
compilation.hooks.processAssets.tap(
{
name: 'MyPlugin',
stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
additionalAssets: true,
},
(assets) => {
// this callback will run against assets added later by plugins.
}
);
(assets) => {}
- Run this specified callback against assets added later by plugins.
compilation.hooks.processAssets.tap(
{
name: 'MyPlugin',
stage: Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING,
additionalAssets: (assets) => {
// this callback will run against assets added later by plugins.
},
},
(assets) => {
// code
}
);
Here's a list of stages we can use:
PROCESS_ASSETS_STAGE_ADDITIONAL
- Add additional assets to the compilation.PROCESS_ASSETS_STAGE_PRE_PROCESS
- Basic preprocessing of the assets.PROCESS_ASSETS_STAGE_DERIVED
- Derive new assets from the existing assets.PROCESS_ASSETS_STAGE_ADDITIONS
- Add additional sections to the existing assets e.g. banner or initialization code.PROCESS_ASSETS_STAGE_OPTIMIZE
- Optimize existing assets in a general way.PROCESS_ASSETS_STAGE_OPTIMIZE_COUNT
- Optimize the count of existing assets, e.g. by merging them.PROCESS_ASSETS_STAGE_OPTIMIZE_COMPATIBILITY
- Optimize the compatibility of existing assets, e.g. add polyfills or vendor prefixes.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE
- Optimize the size of existing assets, e.g. by minimizing or omitting whitespace.PROCESS_ASSETS_STAGE_DEV_TOOLING
- Add development tooling to the assets, e.g. by extracting a source map.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE
5.8.0+ - Optimize the numbers of existing assets, e.g. by inlining assets into other assets.PROCESS_ASSETS_STAGE_SUMMARIZE
- Summarize the list of existing assets.PROCESS_ASSETS_STAGE_OPTIMIZE_HASH
- Optimize the hashes of the assets, e.g. by generating real hashes of the asset content.PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER
- Optimize the transfer of existing assets, e.g. by preparing a compressed (gzip) file as separate asset.PROCESS_ASSETS_STAGE_ANALYSE
- Analyze the existing assets.PROCESS_ASSETS_STAGE_REPORT
- Creating assets for the reporting purposes.afterProcessAssets
SyncHook
Called after the processAssets
hook had finished without error.
needAdditionalSeal
SyncBailHook
Called to determine if the compilation needs to be unsealed to include other files.
afterSeal
AsyncSeriesHook
Executed right after needAdditionalSeal
.
chunkHash
SyncHook
Triggered to emit the hash for each chunk.
chunk
chunkHash
moduleAsset
SyncHook
Called when an asset from a module was added to the compilation.
module
filename
chunkAsset
SyncHook
Triggered when an asset from a chunk was added to the compilation.
chunk
filename
assetPath
SyncWaterfallHook
Called to determine the path of an asset.
path
options
needAdditionalPass
SyncBailHook
Called to determine if an asset needs to be processed further after being emitted.
childCompiler
SyncHook
Executed after setting up a child compiler.
childCompiler
compilerName
compilerIndex
normalModuleLoader
Since webpack v5 normalModuleLoader
hook was removed. Now to access the loader use NormalModule.getCompilationHooks(compilation).loader
instead.