How to configure webpack-bundle-analyzer for react?

Question

I'm trying configure my webpack.config for webpack-bundle-analyzer. Here how it looks.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

And it shows only index.js, main.js and src folders. How to see all my other dependencies?

Answer 1

If you're using Create React App, a simpler method is to go to package.json and edit the npm scripts.

1. Run npm install --save-dev webpack-bundle-analyzer to install webpack-bundle-analyzer
2. Add a --stats flag at the end of "build" script command
3. Add a new script called "analyze" as shown below

"scripts": {
  ...
  "build": "react-scripts build --stats",
  "analyze": "webpack-bundle-analyzer build/bundle-stats.json",
},

Next, run npm run build and then npm run analyze.