reactjs - 如何为 react 配置 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

第一的
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