如何为反应配置 webpack-bundle-analyzer？

Question

我正在尝试为 webpack-bundle-analyzer 配置我的 webpack.config。这是它的外观。

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

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

它只显示 index.js、main.js 和 src 文件夹。如何查看我所有的其他依赖项？

Answer 1

如果您使用Create React App，更简单的方法是转到package.json并编辑 npm 脚本。

1. 运行npm install --save-dev webpack-bundle-analyzer以安装 webpack-bundle-analyzer
2. 在脚本命令--stats末尾添加一个标志"build"
3. "analyze"添加一个名为如下所示的新脚本

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

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

Answer 2

首先 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 包分析器 UI