安装

npm install --save-dev webpack-bundle-analyzer

在 `webpack.config.js` 中添加

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
    plugins: [new BundleAnalyzerPlugin()]
}

构造函数可以采用默认的可选配置对象：

new BundleAnalyzerPlugin({
  analyzerMode: 'server',
  //  将在“服务器”模式下使用的主机启动HTTP服务器。
  analyzerHost: '127.0.0.1',
  //  将在“服务器”模式下使用的端口启动HTTP服务器。
  analyzerPort: 8888, 
  //  路径捆绑，将在`static`模式下生成的报告文件。
  //  相对于捆绑输出目录。
  reportFilename: 'report.html',
  //  模块大小默认显示在报告中。
  defaultSizes: 'parsed',
  //  在默认浏览器中自动打开报告
  openAnalyzer: true,
  //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
  generateStatsFile: false, 
  //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
  //  相对于捆绑输出目录。
  statsFilename: 'stats.json',
  //  stats.toJson（）方法的选项。
  //  例如，您可以使用`source：false`选项排除统计文件中模块的来源。
  //  在这里查看更多选项：https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
  statsOptions: null,
  logLevel: 'info' // 日志级别 可以是'信息'，'警告'，'错误'或'沉默'。
})

常用参数说明：

analyzerMode：可以是server，static或disabled。
- 在 server模式下，分析器将启动HTTP服务器来显示软件包报告。
- 在 static模式下，会生成带有报告的单个HTML文件。
- 在disabled模式下，你可以使用这个插件来将generateStatsFile设置为true来生成Webpack Stats JSON文件
defaultSizes：报告大小的三个值。DefaultSize 可用于控制默认显示其中的哪一个。不同的报告尺寸如下：
- stat：这是文件的“输入”大小，在任何转换(如缩小)之前。
- parsed：这是文件的“输出”大小。如果你使用的是像 Uglify 这样的 Webpack 插件，那么这个值将反映出你的代码的缩小了。
- gzip：这是通过 gzip 压缩运行解析过的 bundle/模块的大小。