webpack-bundle-analyzer配置

• 安装webpack-bundle-analyzer版本号：^4.4.2

• 配置 webpack.config.js如下

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  
  module.exports = {
  	plugins:[
  		 new BundleAnalyzerPlugin({
  		      analyzerMode: 'disabled', // 每次构建时自动打开server  手动打开 disabled
  		      generateStatsFile: true, // 是否生成stats.json文件
  		      statsOptions: { source: false },
  	   	 }),
  	]
  }
  

  注:希望每次build自动打开 把上述analyzerMode调成server就可以 手动打开需要额外增加配置 如下

• 手动开启视图

  • 第一步 再配置完webpack.config之后，先完成build构建工作
  • package.json配置，执行npm run analyz即可打开

    	 "scripts": {
       		 "analyz": "webpack-bundle-analyzer --port 8888 ./build/stats.json",
    	  },
    

• 小结：以上就是webpack-bundle-analyzer插件配置