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', //     。   '  '，'  '，'  ' '  
}

3:よくある質問
コードを修正すると、コードパッケージにポートが占有される場合があります.このときサービスを閉じるには、再度npm run build分析設定analyzerMode:‘disabled’を閉じる必要があります.