ASP.NET Core 2与Webpack 4热重载配置报错：ERR_INCOMPLETE_CHUNKED_ENCODING

我来帮你搞定这个热重载的报错问题！这个ERR_INCOMPLETE_CHUNKED_ENCODING错误在ASP.NET Core 2搭配Webpack 4做React开发时挺常见的，大概率是配置冲突或者中间件的锅，给你几个实用的排查方向和解决办法：

1. 检查ASP.NET Core静态文件中间件配置 #

ASP.NET Core的静态文件处理很可能和Webpack的HMR请求冲突，你得确保Startup.cs里的配置正确，尤其是要让HMR请求能顺利转发给Webpack Dev Server：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        // 把Webpack HMR相关请求转发给Dev Server，端口改成你自己的Webpack服务端口
        app.UseProxyToSpaDevelopmentServer("http://localhost:8080");
    }
    else
    {
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles(); // 静态文件中间件一定要放在Proxy配置之前
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

要是你没用到UseProxyToSpaDevelopmentServer，而是自己手动映射静态文件，记得要确保/__webpack_hmr这个路径不会被静态文件中间件拦截，得让它直接到Webpack那边。

2. 调整Webpack Dev Server的HMR配置 #

检查你的webpack.config.js，确保HMR相关配置和ASP.NET Core的路径匹配：

const webpack = require('webpack');
const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: ['./src/index.js', 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/' // 这个路径要和ASP.NET Core访问静态文件的路径完全一致
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],
    devServer: {
        hot: true,
        contentBase: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        // 把API请求转发给ASP.NET Core的端口，比如你的Core项目跑在5000端口
        proxy: { '/api': 'http://localhost:5000' }
    }
};

重点注意webpack-hot-middleware/client里的path参数，必须和Webpack Dev Server的publicPath对应上，不然路径不匹配就会导致请求异常。

3. 排查浏览器缓存和扩展干扰 #

有时候Chrome的缓存或者第三方扩展会搞砸HMR的分块传输：

• 打开Chrome开发者工具的「Network」标签，勾选「Disable cache」，然后刷新页面重试
• 暂时禁用所有浏览器扩展（比如广告拦截器、代理工具），看看是不是扩展的问题
• 切换到无痕模式打开页面，排除缓存和扩展的影响

4. 禁用开发环境下的响应压缩中间件 #

如果你在Startup.cs里启用了响应压缩，很可能和Webpack的HMR分块编码冲突，建议在开发环境下关掉它：

public void ConfigureServices(IServiceCollection services)
{
    // 只在生产环境启用响应压缩
    if (!env.IsDevelopment())
    {
        services.AddResponseCompression();
    }
    // 其他服务配置...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (!env.IsDevelopment())
    {
        app.UseResponseCompression();
    }
    // 其他中间件配置...
}

5. 更新依赖版本 #

你的ASP.NET Core 2版本比较旧，Webpack 4也不是最新版，可能存在兼容性问题：

• 先尝试更新Webpack相关依赖：npm update webpack webpack-dev-server webpack-hot-middleware
• 如果条件允许，建议把ASP.NET Core升级到3.1或更高版本，新版本对SPA的支持更完善，能减少这类兼容性问题

你可以先从调整静态文件中间件和Webpack配置开始排查，这两个是最容易出问题的地方。

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