Vue-admin 安装使用 webpack-bundle-analyzer 插件

项目场景：

找了好多关于webpack-bundle-analyzer插件的有关内容，最后总结一下如何在Vue-admin项目下安装webpack-bundle-analyzer 插件。 

---

解决方案：

一、安装插件

npm install webpack-bundle-analyzer –save-dev

二、修改配置文件

        在package.json文件中增加

"analyzer": "cross-env NODE_ENV=production npm_config_report=true npm run build:prod"

        注意后面的npm run build:prod，要根据你scripts里的build里来修改。我这里是build:prod，如下图所示。

        接下来去vue.config.js里配置，增加

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

         继续在configureWebpack内容里增加（也是在vue.config.js文件里！）

    plugins: [
      new BundleAnalyzerPlugin(
        {
          analyzerMode: 'server',
          analyzerHost: '127.0.0.1',
          analyzerPort: 8888,
          reportFilename: 'report.html',
          defaultSizes: 'parsed',
          openAnalyzer: true,
          generateStatsFile: false,
          statsFilename: 'stats.json',
          statsOptions: null,
          logLevel: 'info'
        }
      )
    ],

        如下图

 三、运行

        在终端框输入npm run analyzer 即可

        如果遇到报错'cross-env' 不是内部或外部命令，也不是可运行的程序或批处理文件。

        安装一下cross-env即可

npm install -g cross-env

         最后成功运行

        欧耶~