mac下使用npm run dev（webpack）端口占用问题

Posted 2023-04-17

参考技术A 在使用webpack进行打包过程中，我们使用npm run dev运行项目，当我们使用control+c时并不能真正的关掉进程，导致项目端口被占用，下次用同样的项目就是报错

以下是解决方法：
方法一：lsof -i tcp:xxxx 命令可以查看xxxx端口所对应的pid，然后使用kill命令
kill xxxx
kill -9 xxxx 强制删除
方法二：mac下启用活动监视器，可以在活动监视器右上角搜索栏输入node，就会出现相关的进程，选中之后，选择强制退出（本机尝试退出无效，所以点击强制退出）

为啥 webpack 在运行 npm run dev 时会报错

【中文标题】为啥 webpack 在运行 npm run dev 时会报错

【英文标题】：why does webpack gives error when run npm run dev为什么 webpack 在运行 npm run dev 时会报错

【发布时间】：2021-04-28 12:37:49

【问题描述】：

我正在尝试在我的 laravel 项目中运行“npm run dev”，但出现错误： 错误：找不到模块“webpack-cli/package.json” 需要堆栈：

C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js 在 Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15) 在 Function.resolve (internal/modules/cjs/helpers.js:78:19) 在 runCli (C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js:50:26) 在 C:\Users\abdal\AppData\Roaming\npm-cache_npx\20792\node_modules\webpack\bin\webpack.js:139:5 在 processTicksAndRejections (internal/process/task_queues.js:97:5) 代码：'MODULE_NOT_FOUND'， 要求堆栈：[ 'C:\Users\abdal\AppData\Roaming\npm-cache\_npx\20792\node_modules\webpack\bin\webpack.js' ]

请注意，webpack cli 已下载。

【问题讨论】：

你是否运行了“npm install”，你在命令行界面中使用的是什么文件夹？

您似乎缺少webpack-cli module。所以先运行npm install --save-dev webpack-cli来安装webpack-cli，然后再运行npm run dev。

@IslamElHakmi 我从我的项目中删除了 node_modules 文件夹并再次运行 npm install ，现在一切都很好，但它说：再次运行混合！这是什么意思？

@codedge 我以前做过，但返回的结果相同！正如我在之前的评论中所说：我从我的项目中删除了 node_modules 文件夹并再次运行 npm install ，现在一切都很好，但它说：再次运行混合！这是什么意思？

@AbdallahMYassin 尝试npm run watch 如果它不起作用，请尝试此问题中的解决方案：github.com/JeffreyWay/laravel-mix/issues/1475

【参考方案1】：

尝试运行以下命令。

npm install -g webpack-cli

【参考方案2】：

只需按照以下步骤操作：

清除驻留在directory(*****\AppData\Roaming\npm-cache\_logs)上的日志文件 npm i -g webpack-cli [执行此命令] npm install && npm run dev