解決webpack-bundle-analyzer的問題大坑

更新時間：2023年06月08日 09:12:41 作者：IT博客技術(shù)分享

這篇文章主要介紹了解決webpack-bundle-analyzer的問題大坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

webpack-bundle-analyzer的問題大坑

關于webpack-bundle-analyzer的問題大坑，會導致，打包后端口占用，復制一份代碼在起一個服務，報錯端口占用，無法啟動。

報錯如下

解決辦法

1.首先引入webpack-bundle-analyzer模塊

安裝命令：npm install –save-dev webpack-bundle-analyzer

2.在webpack中的代碼配置 (vueCli3.0 舉例）

先說正常的流程的步驟：

2.1、在vue.config.js中進行配置

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

2.2、在package.json中配置（或直接使用npm run build --report）

"scripts": {
    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
}

2.3、只配置生產(chǎn)環(huán)境的打包

config.when(process.env.NODE_ENV === 'production', config => {
    config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
})

2.4、執(zhí)行打包命令（會在瀏覽器自動打開http://127.0.0.1:8888）

npm run bulid

如果8888端口被占用，則提示打包失敗。

2.5、下面來說說端口被占用的處理方法：

首先要在vue.conf.js里

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

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

if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

我是這么判斷的：

// 生產(chǎn)環(huán)境相關配置
		if (isProduction) {
			config.plugins.push(
				new BundleAnalyzerPlugin({
					analyzerMode: 'server',
					analyzerHost: '127.0.0.1',
					analyzerPort: 8880,
					reportFilename: 'report.html',
					defaultSizes: 'parsed',
					openAnalyzer: true,
					generateStatsFile: false,
					statsFilename: 'stats.json',
					statsOptions: null,
					logLevel: 'info'
				}),
            )
      }

復制一份code再起一個服務的時候，只需要改：analyzerPort: 8880, 就可以了。