Webpack-dev-server热模块替换（HMR）多入口场景失效问题排查求助

看起来你遇到的是多入口场景下Webpack HMR的路径和运行时配置问题，我结合你的项目场景和配置来拆解原因，再给出具体的解决步骤：

问题根源分析 #

1. 缺少HMR核心插件：你的webpack.dev.js没有启用HotModuleReplacementPlugin，这是HMR功能的基础——单页面可能因为dev-server的自动刷新“看起来生效”，但多入口场景必须依赖这个插件来管理热更新chunk。
2. CSS加载器不兼容HMR：你在公共配置中全局使用MiniCssExtractPlugin，但这个插件在开发环境不支持HMR，会导致CSS热更新依赖页面刷新，甚至干扰JS的HMR逻辑。
3. 路径配置不统一：output.publicPath未明确配置，导致HMR生成的热更新chunk路径计算错误，出现找不到*.hot-update.js的报错。
4. runtimeChunk配置后未在页面引入：你添加的runtimeChunk提取了Webpack运行时和HMR核心逻辑，但多入口页面没有加载这个chunk，导致HMR完全无法工作。

分步解决方案 #

1. 分离开发/生产环境的CSS加载器 #

开发环境用style-loader支持CSS HMR，生产环境用MiniCssExtractPlugin提取独立CSS文件：

修改webpack.common.js的SCSS规则，把加载器配置改为环境判断模式：

{
  test: /\.scss$/,
  use: [
    process.env.NODE_ENV === 'production' 
      ? MiniCssExtractPlugin.loader 
      : 'style-loader', // dev环境用style-loader支持HMR
    "css-loader",
    "postcss-loader",
    "sass-loader",
  ],
}

或者更清晰的方式，在webpack.dev.js中覆盖SCSS规则：

module.exports = merge(common, {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          "css-loader",
          "postcss-loader",
          "sass-loader",
        ],
      },
    ],
  },
});

2. 启用HMR核心插件并统一路径配置 #

在webpack.dev.js中添加HotModuleReplacementPlugin，并确保output.publicPath和devMiddleware.publicPath一致：

第一步：修改webpack.common.js的output配置

output: {
  path: path.resolve(__dirname, "./src/main/resources/static/myapp"),
  filename: "js/[name].js",
  publicPath: "/myapp/", // 明确公共路径，和devServer对应
},

第二步：更新webpack.dev.js

const common = require("./webpack.common");
const { merge } = require("webpack-merge");
const webpack = require('webpack'); // 引入webpack核心模块

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map",
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // 启用HMR核心插件
  ],
  devServer: {
    proxy: {
      "/": "http://localhost:8081",
    },
    port: 8083,
    hot: true, // 强制开启热更新模式
    devMiddleware: {
      publicPath: "/myapp/", // 和output.publicPath完全一致
    },
  },
});

3. 正确配置runtimeChunk并在页面引入 #

如果你保留runtimeChunk配置，需要确保所有页面都加载这个包含HMR运行时的chunk：

第一步：在webpack.common.js中添加优化配置

optimization: {
  runtimeChunk: { name: 'runtime' }, // 建议用更清晰的名字，比如'runtime'
}

第二步：在所有HTML页面中先加载runtime chunk

single.html:

<body>
  <script th:src="@{/myapp/js/runtime.js}"></script> <!-- 先加载runtime -->
  <script th:src="@{/myapp/js/main.js}"></script>
</body>

multiple.html:

<body>
  <script th:src="@{/myapp/js/runtime.js}"></script> <!-- 先加载runtime -->
  <script th:src="@{/myapp/js/main.js}"></script>
  <script th:src="@{/myapp/js/other.js}"></script>
</body>

4. 给入口文件添加HMR接受逻辑 #

在main.js和other.js的末尾添加HMR接受代码，确保JS修改也能触发热更新：

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

验证步骤 #

1. 先移除之前的runtimeChunk配置，按步骤1-2配置后测试多页面HMR是否正常；
2. 确认基础HMR生效后，再添加runtimeChunk配置并在页面引入runtime chunk，测试完整功能。

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