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:

copy
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:

copy
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:

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

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

copy
yarn add --dev webpack-stats-plugin

copy
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
      }
    })
  ]
};

copy
webpack-stats.json

copy
webpack-stats.json

Framework examples

How to output webpack stats for various frameworks:

• Next.js
• Gatsby
• Create React App