Gatsby: Output webpack stats

To output the webpack stats JSON file on Gatsby, you can use a dedicated webpack plugin like FormidableLabs/webpack-stats-plugin.

Step 1. Install webpack-stats-plugin

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

Step 2. Configure

const { StatsWriterPlugin } = require('webpack-stats-plugin');
exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
if (stage === 'build-javascript') {
plugins: [
new StatsWriterPlugin({
filename: '../webpack-stats.json',
stats: {
assets: true,
chunks: true,
modules: true

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.


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