如何在 Laravel 项目中使用 React 设置热重载？答案

【问题标题】：How to set up hot reloading with React in a Laravel project?如何在 Laravel 项目中使用 React 设置热重载？
【发布时间】：2021-07-05 14:09:17
【问题描述】：

我为我正在玩的 Laravel/React 项目拉下了 this starter kit。我发现热重载不像 Vue.js 那样工作。这是我的脚本（我正在运行npm run hot）

"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "analyze": "source-map-explorer 'public/js/*.js'"
},

这是我的 webpack：

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

require('laravel-mix-tailwind');
require('laravel-mix-purgecss');

mix.react('resources/js/app.js', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .purgeCss()
  .tailwind('tailwind.config.js')
  .webpackConfig({
    externals: [
      'child_process'
    ],
    node: {
      fs: 'empty'
    }
  }).sourceMaps();

我需要在我的 webpack 中添加什么，以便 make 保存我的 React 文件时会在我查看页面时自动更新页面？我试过 various 不同的 solutions 但 nothing 正在工作。

肯定有可能吗？

【问题讨论】：

"npn run watch" 应该检查您的更改，然后热重载
是的，不幸的是，这并没有发生。事实上，当我终止 npm run watch 并刷新内容时，它仍然向我显示 React 代码，所以它就像 Webpack 正在构建/指向错误的位置？

标签： reactjs laravel webpack laravel-mix webpack-hmr

【解决方案1】：

目前是 Laravel 8.x：

npm run hot

也许 laravel 会添加一些包，你会看到一个奇怪的屏幕错误，再次运行就可以了！

如果 package.json 上不存在 hot，只需将其包含在脚本部分：

"hot": "mix watch --hot"

【讨论】：