Webpack-bundle-analyzer如何使用

Webpack-bundle-analyzer是一个Webpack插件，它可以帮助你可视化地分析打包后的代码。

使用步骤如下：

1. 在项目中安装Webpack-bundle-analyzer插件：

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

2. 在Webpack配置文件中引入插件：

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

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

3. 执行打包命令：

webpack --profile --json > stats.json

4. 打开生成的stats.json文件，在浏览器中输入插件提供的地址即可查看分析结果。

如果你只想分析某个特定的入口文件，可以在配置插件时传入对应的参数：

new BundleAnalyzerPlugin({
  analyzerMode: 'static',
  reportFilename: 'report.html',
  openAnalyzer: false,
  generateStatsFile: true,
  statsFilename: 'stats.json',
  logLevel: 'info',
  defaultSizes: 'gzip',
  excludeAssets: /node_modules/
})

其中，analyzerMode表示分析模式（可选值有：server、static、disabled），reportFilename表示生成的报告文件名，openAnalyzer表示是否自动打开浏览器，generateStatsFile表示是否生成stats.json文件，statsFilename表示生成的stats.json文件名，logLevel表示日志级别，defaultSizes表示默认的文件大小（可选值有：parsed、stat、gzip），excludeAssets表示需要排除的资源。