如何运行webpack捆绑分析器？

Question

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

Could't analyze webpack bundle

Answer 1

最后，我发现有两种方法可以解决这个问题。See more。在任何情况下，您都需要添加到webpack.config.js

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

和to

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

然后，如果您希望在每次生成时都在浏览器中查看报表html页面，则不需要执行任何操作。

如果您希望不时使用命令行工具运行报告页面，则需要在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

我将其设置如下，这看起来更清晰一些。已遵循此very nice tutorial about Webpack Visualization。

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

因此，基本上，在构建时，您告知需要捆绑，然后在我的注释中运行第一个命令，webpack- build stats.json -anaylzer将查看bundle-stats.json