vue-cli3配置webpack-bundle-analyzer的方法

1.安装webpack-bundle-analyzer；

npm install webpack-bundle-analyzer -D;

2.在vue.config.js中配置：

chainWebpack: config => {
    config.plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },

3.运行：npm run serve

默认端口8888；http://127.0.0.1:8888/ 查看效果

4.以上配置存在缺陷

当使用npm run serve第一次运行后，访问http://127.0.0.1:8888/ 可以看到分析页面，但如果再进行npm run build时，会提示8888端口被占用。然而检查系统端口，发现并没有被占用，也不知怎么关闭，所以找到了第二种配置方法：

首先在vue.config.js中引入：

let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

然后在configureWebpack中增加：

plugins: [
      new BundleAnalyzerPlugin(
        {
          analyzerMode: 'static',//可选值有server static disabled
          generateStatsFile: false,
          statsOptions: { source: false },
          openAnalyzer: false
        }
      )
    ]

这时无论执行npm run serve还是npm run build，都不会有问题；npm run serve时，会产生一个dist文件夹，里面的report.html就是分析页。