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

To avoid issues with other tools that are checking if the repository has uncommitted changes or if you are publishing your project as a 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!