如何运行 webpack-bundle-analyzer？

Question

我安装了

webpack-bundle-analyzer

并且需要运行它。我该怎么做？我有几个错误。最常见的一种是

Could't analyze webpack bundle

Answer 1

最后我发现可以通过两种方式解决这个问题。 查看更多。无论如何你需要添加到 webpack.config.js

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

到

plugins : [ 
  new BundleAnalyzerPlugin({
    analyzerMode: 'server',
    generateStatsFile: true,
    statsOptions: { source: false }
  }),
  ...
],  

然后如果你想在每次构建时在浏览器中查看报告 html 页面，则不需要任何操作。

如果您想使用 CLI 不时运行报告页面，则需要在 webpack.config.js 中禁用服务器，如下所示：

plugins : [ 
  new BundleAnalyzerPlugin({
    analyzerMode: 'disabled',
    generateStatsFile: true,
    statsOptions: { source: false }
  }),
  ...
],

并在 package.json 的脚本部分添加行：

"scripts": {
  "bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json",
  ...
}

我选了第二个

Answer 2

我设置如下，看起来比较干净。按照这个 非常好的关于 Webpack 可视化的教程.

webpack.config.js

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

webpackConfig.plugins = [
  new BundleAnalyzerPlugin({
    // use value from environment var STATS or 'disabled'
    analyzerMode: process.env.STATS || 'disabled',
  }),
];

package.json

"scripts": {
  "start": "APP_ENV=local PORT=443 webpack-dev-server --config webpack/webpack.config.js",
  "build": "npm run clean && webpack --config webpack/webpack.config.js --
  "stats": "STATS=server npm run build"
},

Answer 3

另一个没有任何代码更改或从 webpack 中弹出的简单解决方案是，

npx webpack-bundle-analyzer ./build/bundle-stats.json

以防万一，您收到有关缺少

bundle-stats.json

的错误，然后运行以下命令（这将生成

bundle-stats.json

文件），然后再次尝试上述命令

yarn run build -- --stats

所以基本上，在构建时，你通知你需要

build stats.json

，然后你在我的评论中运行第一个命令，webpack-bundle-anaylzer 将查看 bundle-stats.json

Answer 4

对于 Angular，我这样做：

ng build --stats-json
npx webpack-bundle-analyzer ./dist/stats.json

Answer 5

我能够通过在我的配置中执行以下操作来修复它：

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') 

原文是：

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