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:
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:
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:
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 } }) ]};
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
.
webpack-stats.json
webpack-stats.json
Framework examples
How to output webpack stats for various frameworks: