如何运行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',
  }),
];

包.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"
},