Webpack-hot-middleware：HMR已连接但原生JS无法热重载问题

嘿，看你的描述，项目启动、编译都正常，HMR也显示连上了，但改完代码页面就是不刷新？我之前搭原生JS+HMR的项目时也踩过这个坑，给你几个排查方向：

1. 给入口文件加上HMR的接受逻辑 #

Vanilla JS不像React有现成的热加载插件帮你处理，得手动告诉Webpack怎么处理模块更新。在client/index.js末尾加这段代码：

if (module.hot) {
  module.hot.accept(() => {
    console.log('📦 模块已更新，触发页面重载');
    // 如果你的页面有初始化函数，比如init()，可以在这里重新调用它
    // 要是图省事，直接刷新页面也能解决
    location.reload();
  });
}

没有这个accept回调的话，Webpack只会默默编译更新后的代码，但不会通知页面刷新，这是最常见的原因。

2. 核对Webpack的Hot配置 #

确认你的webpack.config.js里已经启用了Hot模块替换：

const webpack = require('webpack');

module.exports = {
  // ...其他配置项
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin() // 可选，避免编译错误时输出冗余内容
  ],
  output: {
    publicPath: '/' // 要和devMiddleware的publicPath匹配
  }
};

看你的日志，入口已经包含了webpack-hot-middleware/client?http://localhost:3000，这部分是对的。

3. 检查Express中间件的挂载顺序 #

一定要先挂webpack-dev-middleware，再挂webpack-hot-middleware，顺序反了可能导致HMR的信号传不进来：

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);

// 先挂载devMiddleware
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  stats: 'minimal' // 简化日志输出，可选
}));

// 再挂载hotMiddleware
app.use(webpackHotMiddleware(compiler, {
  log: console.log,
  path: '/__webpack_hmr',
  heartbeat: 10 * 1000
}));

4. 确认Webpack能监听到文件变化 #

如果是在虚拟机或者共享目录里开发，Webpack可能默认的文件监听机制失效，这时候可以在配置里开启poll模式：

// webpack.config.js
module.exports = {
  // ...
  watchOptions: {
    ignored: /node_modules/,
    poll: 1000 // 每隔1秒轮询一次文件变化
  }
};

5. 再检查下浏览器控制台 #

虽然你说只有[HMR] connected，但可以打开控制台的"Verbose"模式，看看有没有HMR相关的隐藏日志，比如模块更新的通知或者错误，有时候小错误会阻止页面刷新。

先试试第一步加module.hot.accept，大概率能解决问题，等后续加React了，换成react-hot-loader就不用这么麻烦啦。

内容的提问来源于stack exchange，提问作者Marco Maza