Output webpack stats

RelativeCI CLI and action agents use the webpack stats JSON file as the source for reports data and metrics. Follow the instructions bellow to configure and ouput the webpack stats as a JSON file.

webpack stats options

The following webpack.stats options are required:

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

The size of the webpack stats JSON file depends on the size of the project. @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 1500 modules is approximately 250KB.

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,
entrypoints: true,
chunks: true,
modules: true,
// Exclude webpack-stats.json asset
excludeAssets: [/webpack-stats.json/],
// Exclude custom-module.js module
excludeModules: [/custom-module.js/]
}
};

Output webpack stats JSON file

You can output the webpack stats JSON file using webpack-cli or webpack-stats-plugin:

npx webpack --mode production --json webpack-stats.json

Install:

npm install --save-dev webpack-stats-plugin

or

yarn add --dev webpack-stats-plugin

Configure:

webpack.config.js
const { StatsWriterPlugin } = require('webpack-stats-plugin');
module.exports = {
// ... your webpack config
plugins: [
// ... other plugins
// Write stats file relative to the build directory
new StatsWriterPlugin({
filename: '../webpack-stats.json',
stats: {
assets: true,
entrypoints: true,
chunks: true,
modules: true
}
})
]
};

FormidableLabs/webpack-stats-plugin



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

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

Framework examples

How to output webpack stats for various frameworks:




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