第一步 安装webpack-bundle-analyzer

cnpm i webpack-bundle-analyzer -D

在webpack.config.js进行引入

const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer")
//...
new BundleAnalyzerPlugin({
  analyzerMode: "disabled", // 不启动展示打包报告的http服务器
  generateStatsFile: true, // 是否生成stats.json文件
}),
//...
//new BundleAnalyzerPlugin(), // 使用默认配置
//默认配置的具体配置项
/*     
new BundleAnalyzerPlugin({
  analyzerMode: 'server',
  analyzerHost: '127.0.0.1',
  analyzerPort: '8888',
  reportFilename: 'report.html',
  defaultSizes: 'parsed',
  openAnalyzer: true,
  generateStatsFile: false,
  statsFilename: 'stats.json',
  statsOptions: null,
  excludeAssets: null,
  logLevel: info
}) */

通过npm 命令启动

// ...
"scripts": {
  "build": "webpack",
  "start": "webpack-dev-server --progress",
  "generateAnalyzFile": "webpack --profile --json > stats.json",
  "analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json"
}
// ...