解决webpack-bundle-analyzer的问题大坑
更新时间：2023年06月08日 09:12:41 作者：IT博客技术分享
这篇文章主要介绍了解决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、 只配置生产环境的打包
config.when(process.env.NODE_ENV === 'production', config => {
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, 就可以了。
好啦，这样在webpack里基本的配置就完成了，而且你npm run build 的时候就会自动打开网址，显示你的打包后的js文件组成和大小。
最后就是引入和使用了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue watch中监听值的变化,判断后修改值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue 2 如何添加 register-service-worker 实现缓存请求的问题
这篇文章主要介绍了Vue 2 如何添加 register-service-worker 以实现缓存请求的目的,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
本文主要介绍了vue+springboot上传大文件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
单元测试是用来测试项目中的一个模块的功能，本文主要介绍了前端Vue单元测试入门教程，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了vue中如何动态设置css样式的hover，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了Vue+Flask实现图片传输功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了验证码的用途和分类,展示了如何创建一个简单的纯前端字符验证码组件,并通过Canvas增加干扰线和干扰点的效果,通过Vue组件化开发,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-01-01
这篇文章主要为大家详细介绍了vue实现简单转盘抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue是一套用于构建用户界面的渐进式框架,它的核心库只关注视图层,易于上手,也便于与其他库或已有项目整合,下面这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,需要的朋友可以参考下2023-05-05
本文主要是带领大家分析$mount的相关知识，需要的朋友一起学习吧2017-12-12
最新评论