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

gatsby-node.js
const { StatsWriterPlugin } = require('webpack-stats-plugin');
exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
if (stage === 'build-javascript') {
actions.setWebpackConfig({
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.

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


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