webpack-bundle-analyzer 没有 stats.json 文件

当你使用 webpack-bundle-analyzer 来分析你的 webpack 打包文件时，有时会遇到以下错误提示：

Error: ENOENT: no such file or directory, open 'stats.json'

这是因为 webpack-bundle-analyzer 默认读取名为 stats.json 的文件来生成分析报告。如果没有该文件，那么就会出现上述错误。

解决方法

1. 在 webpack 配置文件中添加插件 webpack-bundle-analyzer，并在该插件的配置项中指定 analyzerMode 为 static，这将会在编译时自动生成 stats.json 文件。

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

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

2. 如果你的 webpack 配置文件中已经有了插件 webpack-stats-plugin，那么在 webpack-bundle-analyzer 的配置项中使用 stats 指向该插件生成的统计信息文件即可。

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const StatsPlugin = require('webpack-stats-plugin').StatsWriterPlugin;

module.exports = {
  // ...
  plugins: [
    new StatsPlugin({
      filename: 'stats.json'
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'report.html',
      openAnalyzer: true,
      statsFilename: 'stats.json'
    })
  ]
}

以上两种方法请按需使用。

结论

webpack-bundle-analyzer 没有 stats.json 文件这个问题，可能会让你的分析报告无法正常生成。通过本文介绍的两种解决方法，你可以轻松解决这个问题。