webpack运行项目时端口占用解决方法

最新推荐文章于 2023-09-14 19:21:25 发布
最新推荐文章于 2023-09-14 19:21:25 发布
阅读量1.3k 收藏 1
点赞数
文章标签： webpack node.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XIAO_A_fighting/article/details/122487895
版权
本文介绍了解决Webpack因8080端口被占用导致无法正常打包的问题。通过使用netstat-ano命令找到占用端口的进程PID，并在任务管理器中结束该进程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题：今天在运行项目时控制台报了如下错误：
在这里插入图片描述
可以看出webpack无法正常打包运行的原因是因为8080端口被占用。
解决方法：
1）找到占用该端口的进程以及PID
WIN+R打开任务管理器->cmd打开控制台->netstat -ano 查看所有正在运行的进程
在这里插入图片描述
这里可以看到占用了我电脑的8080端口的进程PID为8796
2）CTRL+AIT+.进入任务管理器->点击详细信息即可查看到进程及其对应的PID，杀死占用端口的进程即可。
在这里插入图片描述

MonsterQy
关注
react运行项目当端口被占用直接打开新端口
qq_45524401的博客
09-02 751
四步解决react烦人的端口提示 a.运行 yarn eject 暴露webpack配置 b.打开文件 node_modules/react-dev-utils/WebpackDevServerUtils.js c.找到 choosePort 函数 (大概在449行) d.替换 choosePort function choosePort(host, defaultPort) { return detect(defaultPort, host).then( port =&
webpack vue项目开发环境局域网访问方法
11-28
port: 3000, // 可以选择任意未被占用的端口 // 其他配置... }, // ... }; ``` 注意，`host`前缀应包含`http://`，这是因为Webpack Dev Server会监听HTTP请求。 3. **启动开发服务器** 修改完配置后，重新...
解决webpack 启动端口号被占
darui_lili的博客
03-21 1078
端口号占用
webpack-dev-server8080端口被占用（已解决）以及不用刷新改页面效果时自动刷新
TU_TU9的博客
08-10 933
因为默认生成的dist/bundle.js是在内存中，即使删掉也还是会存在，所以可以直接引用bundle.js。之前安装了Tomcat和一些服务器，所以8080端口被占用导致打开页面时 cannot get--找到放置index.html的src文件夹就可以看到效果啦，实现代码一边改页面一边自动修改~~这样我们就可以在终端运行 npm run dev，打开。（这里的路径可以按照自己的修改）...
webpack生产模式下打包默认运行在63342，端口被占用，打包出来的文件不显示
m0_67108146的博客
06-05 388
webpack生产模式下，默认端口63342，无法正常显示对应的内容
webpack --端口被占用
bylifan的博客
08-15 1484
1.进入cmd命令窗口，写netstat -ano|findstr "端口号" 2.taskkill -PID 占用项目 -F
解决webpack多页面内存溢出的方法示例
10-16
在介绍解决webpack多页面项目中内存溢出的问题时，首先需要理解webpack在处理大型多页面应用时面临的主要挑战。随着项目的增长，项目的文件数量和复杂度都会上升，这直接导致webpack在编译过程中消耗的内存增多，...
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
10-16
在开发Vue CLI项目时，有时会遇到一个棘手的问题，即电脑在运行项目时突然变得异常卡顿，甚至导致系统崩溃。这种情况通常是由于内存资源的过度消耗所引起的。本篇文章将探讨如何解决Vue CLI项目在开发过程中内存暴涨...
webpack-starter-basic:一个简单的webpack入门项目
05-19
在本项目 "webpack-starter-basic" 中，我们将深入探讨如何利用 Webpack 5 来构建一个基础的前端项目。 **一、Webpack 基础概念** 1. **Entry（入口）**: 项目打包的起点，Webpack 从这里开始遍历依赖树。在 ...
webpack-bundle-analyzer报错端口被占用
凤凰传奇的粉丝
08-12 1770
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. 我查找了许多文章都是让查看占用端口的进程，然后杀死。。。 我目的就是想运行多个项目，你让我杀掉一
vue项目启动后，无法关闭，重新启动后，端口还是随机分配
sunxingbrave618的博客
07-18 817
Ctrl+C或者关闭gitbash窗口也没办法关闭，根据网上常见的方法更新依赖文件后，也不行。 然鹅，我的问题却是最基本的。因为端口真的被占用了，跟依赖文件的版本无关，查了一早上，才发现我的问题原因。 查了端口，结果真是这样： 最后，根据网上查到的，去任务管理器那，强制关闭。最终，问题得以解决！ 小白就是小白，加油！ ...
端口自动 按序增加
ren062的专栏
10-24 691
//端口自动 按序增加 SOCKADDR_IN sockAddr;while(true){    sockAddr= .....  ;   //自己定义     //此处SOCKADDR_IN对象     if ( SOCKET_ERROR == bind(sock, (LPSOCKADDR)sockAddr, sockAddr.Size()))   {  
nginx 配置https 前端vue多项目，后端springboot反向代理共用80端口
li947011039的博客
04-20 3382
nginx 配置https 前端vue多项目，后端springboot反向代理共用80端口
Vue3 + vite 和 Vue2+webpack 打包后查看资源占比
卜卦的博客
04-27 3078
1. Vue3 + Vite 中Vite使用的rollup 打包，所以用 rollup-plugin-visualizer --save-dev插件来进行打包体积大小的分析 安装插件 npm install rollup-plugin-visualizer --save-dev 在vite.config.js 或者 vite.confg.ts中使用 import { visualizer } from "rollup-plugin-visualizer"; plugins: [vue(), v
webpack使用教程（二）
sodakii的博客
09-26 1148
1.基本配置以及应用。
webpack配置
热门推荐
m0_60505147的博客
10-09 1万+
webpack是前端的打包工具打包的工作内容是什么扫描项目，生成整个项目所有模块的依赖关系，根据配置对模块进行合并，生成一个单独的文件。修改html文件，让html文件引用生成后的文件将浏览器无法直接识别的（less、sass、ts）文件，转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法。
webpack 基础配置
最新发布
楠姐的博客
09-14 932
简单来说 sourceMap 生成映射文件 其实就是为了 提高开发效率，更快的映射到代码的每一行，比如说当前我们控制台有打印，sourceMap 就能够更快的帮你定位到 当前打印的那一行。文件 , 该文件就是用来保存，运行脚本 ， 依赖包 ， 版本信息等等配置文件。一些高级语法特性，但此时 有些旧的版本浏览器本身是不支持这些高级语法的，例如。在转换之前 ， 你需要先下载该包,下载完成之后，我们接下来进行配置,在。上面我们已经将文件创建出来了 ， 接下来 ，我们既然需要 依赖。
webpack学习笔记
weixin_39848527的博客
09-02 1077
webpack可以做什么事情? webpack能够处理Js文件的互相依赖关系; webpack能够处理js的兼容问题
webpack指南（项目篇）——webpack在项目中的运用
前端成长之路
03-10 1087
前面我们对webpack的基本使用进行了简单的介绍，今天我们来一起总结下webpack在项目中的使用。项目中开发和生产环境往往使用的是不同的请求地址和端口号，我们在配置的时候需要动态的去获取，不能固定写死，这个时候就需要用到环境变量了；1.webpack环境变量webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，–env production 或 --env goal=local。
Webpack插件优化：解决样式项产生多余JS文件问题
资源摘要信息:"webpack-fix-style-only-entries是Webpack的一个插件，专门用来解决在使用Webpack打包时，如果项目中只包含了样式文件（如css、sass、less、stylus等），而没有js文件，Webpack仍然会生成一个额外的js...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值