如何在vue的项目里面使用webpack命令生成stats.json文件

Question

1.想通过图表分析webpack打包出来的代码，搜索了下可以通过webpack --profile --json > stats.json产生webpack统计信息

然后通过官方的地址

上传stats文件分析。

但是在控制台使用webpack --profile --json > stats.json提示

webpack --profile --json > stats.json
No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
Use --help to display the CLI options.

我用的是vue-cli里面的webpack模版，里面配置webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js并没有webpack.config.js怎么破

Answer 1

webpack.prod.conf.js或webpack.base.conf.js中的plugins数组中加入如下代码：

plugins: [
...// 现有插件，
    function() {
      this.plugin('done', function(statsData) {
        const stats = statsData.toJson();
        fs.writeFileSync(path.join(__dirname, 'stats.json'), JSON.stringify(stats));
      });
    }
]

Answer 2

webpack --config ./build/webpack.dev.conf.js --json > stats.json

使用 config 指定配置文件。

它的意思是，假如没有指定配置文件，会在当前目录寻找webpack.config.js 作为配置文件

Answer 3

仔细研究发现webpack.prod.conf.js里面有关于是否开启webpack-bundle-analyzer配置

Answer 4

vue-cli-service 调用的位置添加 report-json 参数，vue-cli-service --report-json。vue-cli-service 支持的参数