ASP.NET Core中Webpack热模块替换（HMR）无法连接问题排查

你的ASP.NET Core项目里已经开启了WebpackDevMiddleware的热替换，但Webpack本身的配置还缺了关键几步，导致客户端没能和HMR服务建立连接：

1. 缺少Webpack内置的HMR核心插件 #

HMR的热替换功能依赖webpack.HotModuleReplacementPlugin这个内置插件，你的plugins数组里只配置了CSS提取插件，没加这个必须的核心插件。

2. 未添加HMR客户端入口脚本 #

浏览器需要加载webpack-hot-middleware/client脚本才能和HMR服务建立WebSocket连接、接收更新通知，这部分没加到entry配置里。

3. 可选：开发模式下CSS热替换的兼容性优化 #

MiniCssExtractPlugin在开发环境下和HMR的兼容性一般——它会把CSS提取成单独文件，而HMR对这类提取后的静态文件热替换支持有限，建议开发时改用style-loader来实现CSS的实时热更新。

下面是修改后的完整配置：

const path = require("path");
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = (env) => {
  const isDevelopment = env?.mode === 'development' || process.env.NODE_ENV === 'development';

  return [{
    mode: isDevelopment ? 'development' : 'production',
    entry: {
      'main': [
        './app.js',
        // 添加HMR客户端入口，配置连接参数
        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'
      ]
    },
    output: {
      path: path.resolve(__dirname, "wwwroot"),
      filename: "js/[name].js",
      publicPath: "/"
    },
    plugins: [
      new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
      // 新增HMR核心插件
      new webpack.HotModuleReplacementPlugin(),
      // 可选：让HMR日志显示模块名称而非ID，方便调试
      new webpack.NamedModulesPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.(less)$/,
          include: [ path.resolve(__dirname, "Styles") ],
          use: [
            // 开发环境用style-loader支持CSS热替换，生产环境用提取插件
            isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'less-loader'
          ]
        }
      ]
    },
    // 开启HMR相关的开发配置
    devServer: {
      hot: true,
      liveReload: false // 关闭自动刷新，避免和HMR功能冲突
    }
  }];
}

另外，你已经在Startup.cs里配置了app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true });，这部分配置没问题，不需要修改。

修改完成后重启应用，打开浏览器控制台就能看到[HMR] connected的日志，HMR也能正常工作了。

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