Solution: webpack-bundle-analyzer without ejecting.

Ejecting is a real shame for any instance of create-react-app, so I found a way to use webpack-bundle-analyzer without ejecting. Hopefully this will save someone out there from having to eject to make this addition.

1. Create a file in root, I call mine “build.js”
2. Add this javascript.

process.env.NODE_ENV = "production"
var BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin

const webpackConfigProd = require("react-scripts/config/webpack.config.prod")

webpackConfigProd.plugins.push(
  new BundleAnalyzerPlugin({
    analyzerMode: "static",
    reportFilename: "report.html",
  })
)

require("react-scripts/scripts/build")

1. node build.js

[cag2050]

Add webpack-bundle-analyzer with ejecting, modify code in file: config/webpack.config.prod.js.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
　　plugins: [
　　　　...
　　　　new BundleAnalyzerPlugin()
　　]
}

demo: https://github.com/cag2050/antd_mobx_demo/blob/master/config/webpack.config.prod.js

[freund17]

For everyone coming here from google and using a recent version of react-scripts: https://github.com/facebook/create-react-app/pull/3945 landed, so now you can use

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build --stats && webpack-bundle-analyzer build/bundle-stats.json -m static -r build/bundle-stats.html -O",
    "test": "react-scripts test"
  }
}

to include bundle-stats.json and bundle-stats.html in your build-directory. (The latter is what you came here for.)