React热重载（Hot Reload）在Webpack 4中无法正常工作求助

我帮你一步步排查和修复热重载失效的问题，从配置到代码层面逐一调整：

1. 确认必要依赖已安装 #

先确保你已经装齐了热重载所需的核心依赖，在项目根目录执行：

npm install react-hot-loader webpack-dev-server webpack --save-dev
# 或者用yarn
yarn add react-hot-loader webpack-dev-server webpack -D

2. 修正Webpack Entry配置 #

你的main入口是React应用的核心（包含index.js），但目前没有加入热重载的必要入口代码，需要把热重载客户端和hot模块添加到main数组最前面：

entry: {
  home: [
    'webpack-dev-server/client?http://0.0.0.0:8000',
    'webpack/hot/dev-server', // 换成`webpack/hot/only-dev-server`可避免语法错误时自动刷新
    path.join(__dirname, 'app/home-styles.js')
  ],
  main: [
    'webpack-dev-server/client?http://0.0.0.0:8000', // 新增这行
    'webpack/hot/dev-server', // 新增这行
    'babel-polyfill',
    path.join(__dirname, 'app/styles.js'),
    path.join(__dirname, 'app/vendor.js'),
    path.join(__dirname, 'app/index.js')
  ]
},

3. 完善Webpack核心配置 #

确保你的webpack配置开启了开发模式，并添加热重载插件：

const webpack = require('webpack');

module.exports = {
  mode: 'development', // 必须设置为development，热重载仅在开发模式生效
  // ...其他配置项
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // 新增热重载插件
    // ...你的其他插件
  ],
  devServer: {
    hot: true, // 你已设置此项，保持即可
    contentBase: path.join(__dirname, 'dist'), // 根据你的输出目录调整
    host: '0.0.0.0',
    port: 8000
  }
};

4. 配置React根组件的热重载包裹 #

在你的index.js（或根组件文件）中，用react-hot-loader的hot函数包裹根组件：
首先导入依赖：

import { hot } from 'react-hot-loader/root';

然后包裹你的根组件（包括Redux Provider的情况）：

// 示例：带Redux Provider的根组件
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

export default hot(Root); // 用hot包裹根组件

5. 检查Babel配置（若使用Babel） #

如果项目用Babel编译React，需要在.babelrc或babel配置中添加热重载插件：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["react-hot-loader/babel"]
}

完成以上调整后，重启webpack-dev-server，修改React组件代码应该就能触发热重载了。

内容的提问来源于stack exchange，提问作者Uchit Kumar