首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的：
Visualize size of webpack output files with an interactive zoomable treemap.
一个很强大的用来优化打包之后文件提交的工具。
在老版本的脚手架里面已经多帮你配置好了，在 build/webpack.prod.conf.js 文件中：
判断是否配置了 bundleAnalyzerReport，如果配置了，加载 webpack-bundle-analyzer 工具包，调用了 BundleAnalyzerPlugin，最终还是 push 到 plugins 对象中：
if (config.build.bundleAnalyzerReport) { ?const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin ?webpackConfig.plugins.push(new BundleAnalyzerPlugin())}在 config/index.js 文件中：配置了 build 对象的 bundleAnalyzerReport
module.exports = { ?build: { ???bundleAnalyzerReport: process.env.npm_config_report ?}}那在新版本里面，我们在 vue.config.js 中如何配置呢？
第一个想到的还是通过 chainWebpack 配置，再看看它的官方说明：
是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。
允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: config => { ?// ...}然后是如何通过 config 生成一个 plugin：
我们查看一下 webpack-chain 插件的 README.md，有如下一段：
config ?.plugin(name) ?.use(WebpackPlugin, args)参照如上格式，有 2 个示例如下：
// Examplesconfig ?.plugin(‘hot‘) ?.use(webpack.HotModuleReplacementPlugin);config ?.plugin(‘env‘) ?.use(webpack.EnvironmentPlugin, [‘NODE_ENV‘]);所以，照着上面的模板，我们也很简单就写出来了：
config ?.plugin(‘webpack-bundle-analyzer‘) ?.use(require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin)但是还不够，我们需要加一些限制条件，类似老版本脚手架里面的：
if (process.env.npm_config_report) { ?// ... ???}然后我们可以在 package.json 中增加 scripts：
key ???是：analyz
value ?是：npm_config_report=true npm run build
"analyz": "npm_config_report=true npm run build"来源：https://segmentfault.com/a/1190000016247872
[Vue CLI 3] 配置 webpack-bundle-analyzer 插件
原文地址：https://www.cnblogs.com/lovellll/p/10138835.html