Laravel执行npm run hot运行旧项目，HMR功能失效求助

嘿，我之前也碰到过几乎一模一样的情况——同个XAMPP环境下，老的Laravel+Vue项目HMR跑得顺风顺水，新建的Laravel+React项目却死活不触发热重载，连[WDS] Hot Module Replacement enabled的提示都看不到。结合你的排查经历，给你整理几个针对性的解决步骤：

1. 先核对package.json的脚本配置 #

Laravel 9及以后的版本，热重载的命令已经更新了，你得确保新项目的package.json里的hot脚本是正确的：

"scripts": {
    "hot": "mix watch --hot",
    "dev": "mix",
    "production": "mix build"
}

别还沿用旧版的hot命令，那会导致HMR启动不起来。

2. 检查webpack.mix.js的React专属配置 #

Laravel Mix对React有专门的配置项，你得确保在webpack.mix.js里正确启用了React和HMR，别不小心写成Vue的配置了：

const mix = require('laravel-mix');

// 核心是调用.react()方法，而不是.vue()
mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .options({
       hmrOptions: {
           host: 'localhost',
           port: 8080 // 这个端口要确保没被其他服务占用
       }
   })
   .webpackConfig({
       devServer: {
           hot: true, // 强制开启HMR
           liveReload: false, // HMR模式下关掉liveReload避免冲突
           allowedHosts: 'all' // 允许所有主机访问，避免跨域问题
       }
   });

3. 排查端口占用情况 #

HMR默认用8080端口，很可能被你的旧项目或者其他后台服务占用了。你可以用命令查一下：

# Windows系统
netstat -ano | findstr :8080

# Mac/Linux系统
lsof -i :8080

如果发现端口被占用，要么杀掉对应的进程，要么在webpack.mix.js里把端口改成8081这类未被占用的端口。

4. 彻底清除各类缓存 #

有时候Laravel的缓存、Mix的缓存会残留旧配置，比单纯删node_modules影响更大。执行这几条命令清干净：

php artisan cache:clear
php artisan config:clear
php artisan view:clear
npx mix clear

5. 确认.env文件的APP_URL配置 #

你的.env文件里的APP_URL必须和Laravel服务的地址一致，比如APP_URL=http://localhost:8000，HMR需要和主服务域名匹配，不然会出现连接失败或者跨域的问题。

6. 手动启动Webpack Dev Server测试 #

如果上面的步骤都没用，你可以绕开Laravel Mix的封装，直接启动Webpack Dev Server试试：

npx webpack serve --mode development --hot

如果这个命令能正常出现[WDS]的提示，说明是Mix的配置出了问题，你可以重新生成Mix的配置文件：

npx laravel-mix init

然后重新配置React相关的项即可。

最后提醒一句：启动项目的时候，要先开Laravel的服务（php artisan serve），再执行npm run hot，顺序别搞反了哦。

内容的提问来源于stack exchange，提问作者BGTabulation BGTabulate