如何为ASP.NET6搭配webpack5、devserver4配置UseProxyToSpaDevelopmentServer实现HMR

修正后的webpack-dev-server v4配置 #

devServer: {
    hot: true,
    port: 8888,
    host: 'localhost',
    compress: true, // 沿用旧版的压缩配置
    allowedHosts: ['localhost:44331'], // 放行ASP.NET站点的访问权限
    client: {
        // 补全websocket路径，对应devserver默认的ws服务地址
        webSocketURL: 'wss://localhost:44331/ws',
    },
    devMiddleware: {
        publicPath: '/dist',
    },
    static: false, // 该配置确实对应旧版contentBase: false，无需修改
    // 核心修复逻辑：非/dist前缀的请求直接返回404，触发ASP.NET代理回退
    onBeforeSetupMiddleware: (devServer) => {
        devServer.app.get('*', (req, res) => {
            if (!req.path.startsWith('/dist')) {
                res.sendStatus(404);
            }
        });
    }
}

可选调整：ASP.NET 6中间件顺序校验 #

确认UseSpa注册在所有路由、静态文件中间件之后，示例如下：

var builder = WebApplication.CreateBuilder(args);
// ... 服务注册逻辑
var app = builder.Build();

// 其他中间件注册顺序
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

// UseSpa必须放在最后注册
app.UseSpa(spa =>
{
     spa.UseProxyToSpaDevelopmentServer("http://localhost:8888");
});

app.Run();

问题原因说明 #

1. 原有配置的webSocketURL缺少/ws路径后缀，导致HMR websocket连接无法建立
2. 未对devserver的请求做路径拦截，根路径/的请求被转发到devserver后，devserver无对应资源返回404，直接被代理返回给客户端。新增路径拦截逻辑后，非/dist的请求devserver返回404，ASP.NET代理会自动将请求回退到自身的路由管道处理，返回ASP.NET生成的首页
3. 缺少allowedHosts配置会导致devserver默认拒绝跨域访问的资源请求，导致静态资源加载失败

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