如何在Laravel项目中使用React设置热重新加载

Question

我为我正在玩的Laravel/React项目下载了这个入门套件。我发现热重新加载不像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'"
}, 

这是我的网络包：

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中添加什么，以便在查看页面时保存我的React文件自动更新页面？我尝试过各种不同的解决方案，但都不起作用。

这肯定是可能的吗？

Answer 1

当前Laravel 8.x:

npm run hot

也许laravel会添加一些包，你会看到一个奇怪的屏幕错误，再次运行并工作！

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

"hot": "mix watch --hot"