如果你使用的是Create React App，一个更简单的方法是转到package.json并编辑npm脚本。
1.运行npm install --save-dev webpack-bundle-analyzer安装webpack-bundle-analyzer
1.在"build"脚本命令的末尾添加--stats标志
1.添加名为"analyze"的新脚本，如下所示

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

接下来，运行npm run build，然后运行npm run analyze。

首先npm install --save-dev webpack-bundle-analyzer其次，在webpack.config.js中添加一些配置这是我在config/webpack.config.js中使用create react app时的配置
导入顶部的库

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

还要添加一些验证，以便构建脚本在部署到生产环境时不会出现问题

const withReport = process.env.npm_config_withReport

在插件中添加此代码

plugins:[
  withReport ? new BundleAnalyzerPlugin() : '',
]

最后，在JSON包中添加一个新脚本

"report": "npm run build --withReport true"

在你的终端上运行“npm run report”。应该会自动出现webpack bundle analyzer UI

通过这种方式，您可以配置webpack-bundle-analyzer而无需弹出您的React App
1.通过执行npm install --save-dev progress-bar-webpack-plugin webpack-bundle-analyzer添加一些依赖项
1.在React App的根目录下创建一个名为scripts的新文件夹。
1.在scripts文件夹中创建一个新文件analyze_build_bundle.js，并在该文件中添加以下代码

// script to enable webpack-bundle-analyzer
process.env.NODE_ENV = 'production';
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const webpackConfigProd = require('react-scripts/config/webpack.config')(
  'production'
);

const ProgressBarPlugin = require('progress-bar-webpack-plugin');

webpackConfigProd.plugins.push(new BundleAnalyzerPlugin());
webpackConfigProd.plugins.push(
  new ProgressBarPlugin({
    format: `analyzing... [:bar] [:percent] [:elapsed seconds] - :msg`,
  })
);

// actually running compilation and waiting for plugin to start explorer
webpack(webpackConfigProd, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err);
  }
});

1.在package.json文件中添加analyze-build-bundle命令，以运行webpack-bundle-analyzer，如下所示：

"scripts": {
    "analyze-build-bundle": "node scripts/analyze_build_bundle.js",
    "start": "react-scripts start",
    .....
    ...
}

1.现在执行命令npm run analyze-build-bundle。这将构建您的应用程序，然后启动分析器本地服务器，您应该能够看到如下图所示的屏幕

要使用可选参数运行插件，对我来说，以下主题的解决方案效果更好：webpack config with optional usage of BundleAnalyzerPlugin
我通过对我的webpack.config.js进行一些更改来解决这个问题。
首先，我改变了声明的方式。然后我改变了示例化BundleAnalyzerPlugin的方式，在其他插件之后使用concat：

...
const withReport = process.env.npm_config_withReport ? true : false;
...
plugins: [
...
].concat(withReport ? [new BundleAnalyzerPlugin()] : []),
...