启用HMR的Webpack 5修改后触发全页面刷新问题排查

核心问题定位 #

你的Webpack-dev-server配置中，devServer.static.directory指向了src源码目录，导致Webpack-dev-server将src下的文件识别为静态资源文件，而非Webpack打包的模块。当这些文件修改时，WDS会直接触发页面全量刷新，而非通过HMR机制进行局部更新。

具体修复步骤 #

1. 修正devServer.static配置

将静态资源目录从src改为打包输出目录dist，或者如果不需要额外静态文件服务，可直接移除该配置（Webpack-dev-server默认会托管打包后的资源）：

devServer: {
  static: {
    directory: path.resolve(__dirname, "dist"), // 改为输出目录
  },
  hot: true
},

原因：static目录用于托管无需Webpack打包的静态文件（如HTML、图片），源码目录src属于Webpack的打包范围，不应被设为静态目录，否则WDS会绕过HMR逻辑直接刷新页面。

2. 调整entry加载顺序

将react-hot-loader/patch移到entry数组的首位，确保HMR补丁在项目代码之前加载：

entry: [
  'react-hot-loader/patch',
  './src/index.tsx',
],

3. 为React根组件启用HMR

在根组件（如App.tsx）中使用react-hot-loader的hot方法包裹组件：

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

const App = () => {
  // 组件逻辑
};

export default hot(App);

原因：react-hot-loader需要显式标记根组件，才能实现React组件的热替换，否则无法触发组件的局部更新。

4. 验证CSS HMR

style-loader默认支持CSS的HMR，修正上述配置后，修改CSS文件时应该会自动更新样式而不刷新页面。若仍有问题，可检查是否存在其他配置冲突（如自定义的文件监听规则）。

控制台输出解释 #

之前出现的"C:\path\to\ComponentName.tsx" from static directory was changed. Reloading...日志，正是因为src被设为静态目录，WDS检测到静态文件变化后触发了页面跳转（Navigated to http://localhost:8080/），而非通过HMR进行模块更新。

内容的提问来源于stack exchange，提问作者Rob Freundlich