Webpack Bundle Analyzer 使用常见问题

一：安装

npm intall webpack-bundle-analyzer –save-dev

二：配置

在vue.config.js 里面

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

...
module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({ // 插件在这里使用
        analyzerHost: '127.0.0.1',
        //  将在“服务器”模式下使用的端口启动HTTP服务器。
        analyzerPort: 8889, 
        analyzerMode: 'server',
        openAnalyzer: false
      }),
      new Webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery'
      })
    ],

npm官网的默认配置如下

{
 	//  在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。
  	//  在“静态”模式下，会生成带有报告的单个HTML文件。
  	//  在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
	analyzerMode：'server' | 'static' | 'disabled',
	analyzerHost: '127.0.0.1',  //  将在“服务器”模式下使用的主机启动HTTP服务器。
	analyzerPort: 8888, //  将在“服务器”模式下使用的端口启动HTTP服务器。
	reportFilename: 'report.html', //  路径捆绑，将在`static`模式下生成的报告文件。 相对于捆绑输出目录。
	defaultSizes: 'stat' | 'parsed' | 'gzip', //  模块大小默认显示在报告中。应该是`stat`，`parsed`或者`gzip`中的一个。
	openAnalyzer: true, //  如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成
	generateStatsFile: false, //  如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。
	statsFilename: 'stats.json',   //  stats.toJson（）方法的选项。
  	//  例如，您可以使用`source：false`选项排除统计文件中模块的来源。
  	//  在这里查看更多选项：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
	statsOptions: null or {Object},
	excludeAssets: {null\|pattern\|pattern[]} where pattern equals to {String\|RegExp\|function},
	logLevel: 'info' | 'warn' | 'error' | 'silent', // 日志级别。可以是'信息'，'警告'，'错误'或'沉默
}

三：常见问题

修改完代码，代码打包出现 端口占用的情况，这个时候要关闭服务，再次npm run build
如果想关闭分析 设置 analyzerMode: ‘disabled’ 即可