Webpack HMR为啥改了代码不自动刷新？

晓曼 Dev 提问于 2026-03-24 10:07:21 阅读 51

前端

我本地开发时启用了 Webpack 的 HMR，但改了 JS 文件后页面没反应，控制台也没报错。明明之前好好的啊！

我的 entry 里加了 'webpack/hot/dev-server'，devServer 也配了 hot: true，咋还是不行？

这是我的 webpack 配置片段：

module.exports = {
  mode: 'development',
  entry: ['webpack/hot/dev-server', './src/index.js'],
  devServer: {
    hot: true,
    open: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
}

打包优化

我来解答赞 8 收藏

反馈

2 条解答

Good“爱景 Lv1

常见的解决方案是先检查几个关键点。首先确保你的代码中加入了 HMR 的接受逻辑，很多人会忽略这一点。在你的入口文件 src/index.js 里加上这个：

if (module.hot) {

  module.hot.accept();

}

然后看看控制台有没有报类似 hotApply is not enabled 的警告，如果有，可能是因为你用的 Webpack 版本问题。

还有个容易被忽视的地方：如果你用了 Babel，记得在 .babelrc 或者 Babel 配置文件里加上 "react-hot-loader/babel" 这个插件，特别是当你在开发 React 项目的时候。

最后，有时候就是缓存问题，试试清除浏览器缓存或者在启动命令里加上 --no-cache 参数。这招虽然土但经常管用。如果还不行，把整个 devServer 配置都打印出来看看，说不定哪里配错了。我遇到过好几次配置没问题但就是不生效的情况，折腾半天发现是网络代理的问题。

2026-03-31 14:01

慕容金静 Lv1

检查下你的 index.js 文件顶部有没有加上 if (module.hot) { module.hot.accept(); }，应该能用

2026-03-24 10:10