首先简单介绍一下webpack-bundle-analyzer的作用：使用交互式缩放树图可视化webpack输出文件的大小。一个非常强大的工具，用于优化后续文件提交的打包工具。在老版本的脚手架里，已经帮你配置好了。在build/webpack.prod.conf.js文件中：判断是否配置了bundleAnalyzerReport，如果配置了，加载webpack-bundle-analyzer工具包，调用BundleAnalyzerPlugin，最后push到plugins对象：if(config.build.bundleAnalyzerReport){constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPluginwebpackConfig.plugins.push(newBundleAnalyzerPlugin())}在config/index.js文件中：bundleAnalyzerReportmodule.exportswithbuildobjectconfigured={build:{bundleAnalyzerReport:process.env.npm_config_report}}那么在新版本中，我们如何在vue.config.js中进行配置呢？首先想到的是通过chainWebpack配置，然后看它的官方描述：它是一个基于webpack-chain的函数，会接收一个ChainableConfig实例。允许对内部webpack配置进行更细粒度的修改。chainWebpack:config=>{//...}那么如何通过config生成一个插件：我们查看webpack-chain插件的README.md，里面有如下一段：config.plugin(name).use(WebpackPlugin,args)参考上面的格式，有2个例子如下：'NODE_ENV']);所以，根据上面的模板，我们写的很简单：config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)但是还不够，我们需要添加一些限制，类似于老版本脚手架中的限制：if(process.env.npm_config_report){//...}那么我们可以在package.json中添加脚本：keyis:analyzvalueis:npm_config_report=真正的npm运行构建“analyz”：“npm_config_report=truenpm运行构建”
