webpack-cli: Output webpack stats

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. RelativeCI agent extracts data from assets, chunks, and modules entries, and the corresponding stats options are required:

webpack.config.js

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

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

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

Validation errors

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

Laravel Mix webpack base config sets stats.presets to errors-warnings. To allow 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 1500 modules is approximately 250KiB.

To optimize the webpack stats JSON file size, 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 .gitingore / .npmignore.

.gitignore

webpack-stats.json

.npmignore

webpack-stats.json

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

RelativeCI

In-depth bundle analysis and monitoring