Output webpack stats with webpack-cli

webpack-cli provides a built-in method to generate the webpack stats JSON file after the bundle compilation is complete.

Configure

The webpack stats JSON data and structure are controlled by the webpack config stats options. The RelativeCI agent extracts data from assets, chunks, and modules entries. The corresponding stats options are required:

webpack.config.js
module.exports = {
// ... project webpack config
stats: {
assets: true,
chunks: true,
modules: true
}
};

The output of the setup with multiple configurations are not supported! Please use the webpack-stats-plugin method to output the stats for the desired configuration.


For advanced transformations of the webpack stats data, please check the webpack-stats-plugin transform option.

Exclude assets or modules

If you need to exclude particular assets or modules, you can use the webpack stats excludeAssets or excludeModules configuration options:

webpack.config.js
module.exports = {
// ... project webpack config
stats: {
assets: true,
chunks: true,
modules: true
// Exclude webpack-stats.json asset
excludeAssets: [/webpack-stats.json/],
// Exclude custom-module.js module
excludeModules: [/custom-module.js/]
}
};

Exclude virtual modules

Some plugins use virtual modules as an intermediary step when generating modules. For example, vanilla-extract creates a virtual module for every .css.js/css.ts file based on the loader module path and the filename/source as query parameters:

./node_modules/@vanilla-extract/webpack-plugin/vanilla.virtual.css?%7B%22fileName%22%3A%22src%2Fcomponents%2Fcomponent%2Fcomponent.css.ts.vanilla.css%22%2C%22source%22%3A%22MODULE_CONTENT%22%7

Inlining the encoded source and the filename causes an increase in the size of the output stats and adds unnecessary entries to the stats. To ignore vanilla-extract virtual modules from the stats and from the bundle analysis report, use excludeModules option:

webpack.config.js
module.exports = {
// ... project webpack config
stats: {
assets: true,
chunks: true,
modules: true
// Exclude vanilla-extract virtual modules
excludeModules: [
/@vanilla-extract\/webpack-plugin\/vanilla-virtual\.css/,
],
}
};

For advanced transformations of the webpack stats data, please check the webpack-stats-plugin transform option.

Validation errors

The RelativeCI agent validates the webpack stats JSON structure before extracting the required data. However, because the webpack stats options are global, the values can be changed before/during the compilation by another plugin or a framework base config, and the result can fail the structure validation.

If you encounter agent validation errors, please consider using the webpack-stats-plugin method to fully control the webpack stats JSON structure.

Known issues

The Laravel Mix webpack base config sets stats.presets to errors-warnings. To allow the RelativeCI agent to validate and extract the data, set stats.preset to normal:

webpack.config.js
module.exports = {
// ... project webpack config
stats: {
preset: 'normal',
assets: true,
chunks: true,
modules: true
}
};

Output file size

The size of the webpack stats JSON file depends on the size of the project and the stats configuration. @relative-ci/agent filters the file and sends only the required data. For example, the size of the filtered webpack stats for an application with 100 assets and 1,500 modules is approximately 250 KiB.

To optimize the JSON file size of the webpack stats, please consider using the webpack-stats-plugin method to fully control the webpack stats JSON structure.

Output webpack stats JSON file

npx webpack --mode production --json webpack-stats.json
[webpack-cli] stats are successfully stored as json to webpack-stats.json


To avoid issues with other tools that check if the repository has uncommitted changes or if you are publishing your project as an npm package, consider adding the generated webpack stats file to .gitignore/.npmignore.

.gitignore
webpack-stats.json
.npmignore
webpack-stats.json



Need help?Contact us via email, Twitter, or GitHub!