RelativeCI

In-depth bundle analysis and monitoring

Output webpack stats with webpack-stats-plugin

The webpack-stats-plugin extracts the webpack stats using custom stats options and generates the webpack stats JSON file.

Install

npm install --save-dev webpack-stats-plugin
yarn add --dev webpack-stats-plugin
pnpm add -D webpack-stats-plugin

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:

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,
        chunks: true,
        modules: true
      }
    })
  ]
};

Output webpack stats JSON file

The plugin generates the webpack stats JSON file during the build process:

npx webpack --mode production
asset ../webpack-stats.json [emitted]

Advanced configuration

Exclude assets or modules

If you need to exclude particular assets or modules, you can use the webpack stats excludeAssets or excludeModules configuration options:

// ... your webpack config
  plugins: [
    // ... other plugins
    // Write stats file relative to the build directory
    new StatsWriterPlugin({
      filename: '../webpack-stats.json',
      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/]
      }
    })
  ]
};

Optimize the webpack stats JSON file size

The module's data can grow large for projects with a high number of modules. To optimize the webpack stats JSON file size, you can use the transform property to output only the data required by the RelativeCI agent or bundle-stats:

Install @bundle-stats/plugin-webpack-filter

npm install --save-dev @bundle-stats/plugin-webpack-filter
yarn add --dev @bundle-stats/plugin-webpack-filter
pnpm add -D @bundle-stats/plugin-webpack-filter

Filter the webpack stats data

const { StatsWriterPlugin } = require('webpack-stats-plugin');
const filterWebpackStats = require('@bundle-stats/plugin-webpack-filter').default;


module.exports = {
  // ... your webpack config
  plugins: [
    // ... other plugins
    new StatsWriterPlugin({
      filename: '../webpack-stats.json',
      stats: {
        assets: true,
        chunks: true,
        modules: true
      },
      transform: (webpackStats) => {
        const filteredSource = filterWebpackStats(webpackStats);
        return JSON.stringify(filteredSource);
      }
    })
  ]
};

Advanced transforms

For advanced cases, you can use the webpack-stats-plugin transform option to extract and manipulate the webpack stats result.

Resources



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 .gitignore/.npmignore.

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



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

Identify and fix bundle regressions before shipping to production

Get started for freeGet in touch