多入口Vue项目中webpack-hot-middleware使用及热更新失效问题

我来帮你搞定这个多入口项目里webpack-hot-middleware只重建不刷新页面的问题，结合你给出的配置片段，咱们一步步排查：

多入口项目不能只靠插件配置，每个入口文件都得手动做两件事：

• 在入口文件最顶部添加模块热替换的接受逻辑：

if (module.hot) {
  module.hot.accept();
}

• 同时在webpack的entry配置里，给每个入口都加上webpack-hot-middleware/client的路径，比如：

entry: {
  [dir]: [
    'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
    `./src/${dir}/index.js`
  ]
}

这里的path要和你后面hotMiddleware配置里的路径完全一致，不然HMR的信号传不到页面。

看你用了dirs.forEach循环，得注意：如果是单webpack编译器实例+多入口的情况，不需要循环挂载hotMiddleware，只要挂载一次就行，比如：

const compiler = webpack(webpackConfig);
// 先挂载devMiddleware
app.use(devMiddleware(compiler, {
  publicPath: webpackConfig.output.publicPath
}));
// 再挂载hotMiddleware，确保路径和入口里的客户端配置一致
app.use(hotMiddleware(compiler, {
  log: false,
  path: '/__webpack_hmr',
  heartbeat: 2000
}));

要是你是多编译器实例（每个入口对应一个compiler），那才需要循环创建并挂载hotMiddleware，但这种场景比较少见，优先确认是单compiler的情况。

• output里必须用[name]占位符来生成对应入口的bundle文件名，不然HMR找不到对应的模块：

output: {
  filename: '[name].js',
  publicPath: '/'
}

• 如果你用了HtmlWebpackPlugin生成页面，要确保每个入口对应的插件配置都开启了inject: true，让它自动注入HMR相关的bundle，并且不要手动修改bundle的引入路径。

有时候虽然加了module.hot.accept()，但如果修改的是某个依赖模块，可能需要明确指定接受该模块，比如你修改了某个组件文件，就得在入口文件里写：

module.hot.accept('./components/MyComponent', () => {
  // 这里要写重新渲染的逻辑，比如React项目里重新调用render方法
  renderMyApp();
});

要是没有明确的接受逻辑，HMR可能只会更新模块，但不会触发页面刷新。

虽然显示[HMR] connected，但可能有隐藏的报错导致更新失败。打开浏览器控制台，切换到Verbose模式，看看有没有[HMR] Update failed:之类的提示，根据错误信息修复对应的问题（比如模块解析错误、依赖缺失）。

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