webpack-bundle-analyzer报错端口被占用

最新推荐文章于 2024-05-05 00:34:21 发布
最新推荐文章于 2024-05-05 00:34:21 发布
阅读量1.5k 收藏
点赞数 1
文章标签： springboot webpack java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18831501/article/details/119650189
版权

springboot使用webpack-bundle-analyzer插件报错
events.js:292 throw error Unhandled ‘error’ event
listen address:address already in use 127.0.0.1:8888
原因是因为我运行了两个使用webpack-bundle-analyzer的项目，这两个项目都使用了127.0.0.1:8888.
我查找了许多文章都是让查看占用端口的进程，然后杀死。。。
我目的就是想运行多个项目，你让我杀掉一个。。。
最后发现在配置文件中，更改vueConfig中plugins的配置，可以更改端口，这里改成9090，
new BundleAnalyzerPlugin({analyzerPort:9090})
然后运行多个项目，就不会出现端口冲突的问题了。
react配置webpack-bundle-analyzer项目优化踩坑

凤凰传奇的粉丝
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
10-16
而 `webpack-bundle-analyzer` 插件则是用来分析项目打包后的文件大小，帮助开发者识别出哪些模块占用了最多的空间，从而进行针对性的优化。这篇文章将详细解析如何在 Vue CLI 3 项目中配置并使用 `webpack-bundle-...
vue-cli项目优化方法- 缩短首屏加载时间
01-19
我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 安装 npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下，然后npm run dev 的时候...
Error: listen EADDRINUSE: address already in use 127.0.0.1:8888
Y_soybean_milk的博客
05-30 648
在我打包的时候出现了上面的错误，此时我本地跑了两个项目 大概意思就是监听的地址被占用。 打开命令面板 Win+R=>cmd 查看端口对应的进程ID netstat -nao | findstr 8888 查看关于该进程的细节（可省略） tasklist | findstr 13964 查杀任务： 方式1： taskkill /pid 13508 #强制终止 taskkill/F /pid 13508 方式2：ctrl+shift+esc,调...
2024年Web前端最全关于webpack-bundle-analyzer的问题大坑，深入分析
最新发布
2401_84411433的博客
05-05 910
好啦，这样在webpack里基本的配置就完成了，而且你npm run build 的时候就会自动打开网址，显示你的打包后的js文件组成和大小。一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！HTTP1.1 如何解决 HTTP 的队头阻塞问题？对于定长和不定长的数据，HTTP 是怎么传输的？HTTP 中如何处理表单数据的提交？如何理解 HTTP 缓存及缓存代理？HTTP 如何处理大文件的传输？
启动项目报错：端口号被占用Error: listen EADDRINUSE: address already in use 127.0.0.1:8888
XUELINGMM的博客
05-15 438
记录一下项目中遇到的奇怪的bug，前一秒还能正常运行，下一秒就报以下错误（端口号被占用）好了既然知道报错原因是端口号被占用，那就看怎么关闭端口号吧。。。
从零搭建webpack4
08-10
Webpack 提供了性能提示和分析工具，如webpack-bundle-analyzer，可帮助优化资源大小和加载速度。 ```bash npm install --save-dev webpack-bundle-analyzer ``` 在`webpack.config.js`中引入并使用这个插件。 ###...
react-tmdb:TMDb
05-15
带React的TMDb API现场演示使用的工具webpack 4.6.0 React16.2.0 redux，redux-thunk material-ui，样式化组件，网格样式发展开始： yarn dev （默认端口：3000） 启动和打开束分析仪： yarn dev-bundle-analyzer ...
n-service-system
04-04
要启用Webpack Bundle Analyzer，请执行npm run analyze analysis（生产构建）。 要启用热模块重新加载，请执行npm start -- --hmr 。 要更改开发服务器端口，请执行npm start -- --port 8888 。 要更改开发服务器...
ie-11-testing
04-04
要启用Webpack Bundle Analyzer，请执行npm run analyze analysis（生产构建）。 要启用热模块重新加载，请执行npm start -- --hmr 。 要更改开发服务器端口，请执行npm start -- --port 8888 。 要更改开发服务器...
Aurelia-Based-Application:哈恩演示应用
04-04
要启用Webpack Bundle Analyzer，请执行npm run analyze analysis（生产构建）。 要启用热模块重新加载，请执行npm start -- --hmr 。 要更改开发服务器端口，请执行npm start -- --port 8888 。 要更改开发...
aurelia-app：aurelia项目
02-12
要启用Webpack Bundle Analyzer，请执行npm run analyze analysis（生产构建）。 要启用热模块重新加载，请执行npm start -- --hmr 。 要更改开发服务器端口，请执行npm start -- --port 8888 。 要更改开发服务器...
aurelia-components:aurelia项目的日期和时间选择器组件
04-12
要启用Webpack Bundle Analyzer，请执行npm run analyze analysis（生产构建）。 要启用热模块重新加载，请执行npm start -- --hmr 。 要更改开发服务器端口，请执行npm start -- --port 8888 。 要更改开发...
角度学习
02-20
npm install webpack-bundle-analyzer --save-dev ng build --stats-json在构建中添加stats.json npx webpack-bundle-analyzer dist/angular-build-serving/stats.json ng build --aot优化构建 ng b --prod构建...
性能分析webpack-bundle-analyzer
yezitoo的博客
06-11 2173
webpack插件的github地址是： https://github.com/webpack-contrib/webpack-bundle-analyzer/ 我个人是直接执行 npm run dev 或者 npm run build 就可根据分析工具的配置进行查看 package.json "dev": "cross-env webpack-dev-server --open --config ./webpack.config.dev.js --color" "build": "cro.
node环境端口号被占用导致Vue报错：Error listen EADDRINUSE: address already in use 127.0.0.1:8888
u_ndefine_d的博客
01-05 944
由于端口号被占用，所以会报上图所示的错误，找到被占用的端口，关闭它就OK了
webpack-bundle-analyzer
09-15
webpack-bundle-analyzer是一个用于分析和可视化Webpack打包结果的工具。它可以帮助开发者识别应用程序中的资源优化机会，以及发现打包过程中的潜在问题。 通过使用webpack-bundle-analyzer，你可以生成一个交互式的可视化报告，显示了构建过程中各个模块的大小、依赖关系、被引用次数等信息。这样你就可以更好地理解你的打包结果，并根据需要进行优化。 要使用webpack-bundle-analyzer，首先需要在项目中安装相应的依赖。你可以通过运行以下命令来安装： ``` npm install --save-dev webpack-bundle-analyzer ``` 安装完成后，在你的Webpack配置文件中引入并配置webpack-bundle-analyzer插件。例如，在webpack.config.js文件中添加以下代码： ```javascript const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { // ...其他配置 plugins: [ new BundleAnalyzerPlugin() ] }; ``` 然后，重新运行Webpack构建命令，完成后会自动打开一个浏览器窗口展示分析结果。 除了默认配置之外，webpack-bundle-analyzer还提供了一些选项供你进行更详细的配置，例如只分析特定的bundle或模块，输出报告的路径等。 希望这个简介对你有所帮助！如果有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值