webpack - 如何运行 webpack-bundle-analyzer？

Question

我安装了 webpack-bundle-analyzer并且需要运行它。我该怎么做？我有几个错误。最常见的一种是

Could't analyze webpack bundle

Answer 1

最后我发现可以通过两种方式解决这个问题。 See more .在任何情况下，您都需要添加到 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",
  ...
}

我做了第二个选择。