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:

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/]
  }
};

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:

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/,
    ],
  }
};

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:

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

webpack-stats.json

webpack-stats.json