2024年前端最新关于webpack-bundle-analyzer的问题大坑，阿里面试 笔试题

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

config.plugin(‘webpack-bundle-analyzer’).use(require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin)
})

**2.4、执行打包命令（会在浏览器自动打开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())
}

我是这么判断的：

// 生产环境相关配置
	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,  就可以了。


![](https://img-blog.csdnimg.cn/20210817221159469.png)


![](https://img-blog.csdnimg.cn/20210817221228194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ2MjQ5,size_16,color_FFFFFF,t_70)


 好啦，这样在webpack里基本的配置就完成了，而且你npm run build 的时候就会自动打开网址，显示你的打包后的js文件组成和大小。最后就是引入和使用了


![](https://img-blog.csdnimg.cn/20210817221608372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ2MjQ5,size_16,color_FFFFFF,t_70)


 ![](https://img-blog.csdnimg.cn/20210817221620957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ2MjQ5,size_16,color_FFFFFF,t_70)
## ❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/749637bc1a3e9d2c567826a0b9be664c.webp?x-oss-process=image/format,png)
> 









sdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

> [外链图片转存中...(img-ZpCfbSlg-1715607349995)]
>