解决Webpack dev server热加载失败的publicPath配置问题

作者：编译时光

时间：2026-10-22

本文针对Webpack dev server热加载时出现的跨域报错及HMR超时警告，分析根本原因为publicPath配置了绝对地址。通过对比错误与正确配置示例，指出应将publicPath修改为相对路径（如/dist/）。同时提醒，该配置与webpack-hot-middleware的要求相反，后者需使用绝对路径。

文章目录

Webpack dev server热加载报错现象

在使用Webpack dev server进行热加载开发时，可能会遇到如下报错信息：


XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost' is therefore not allowed access.

或者控制台会显示类似的警告提示：


dev-server.js:37 [HMR] Update failed: Error: Manifest request to http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json timed out.
 at XMLHttpRequest.request.onreadystatechange (http://localhost:8080/dist/main.js:38:22)

publicPath配置修正方案

经排查，问题根源在于webpack.config.js中publicPath的配置方式。正确的做法是将原本可能配置的绝对地址改为相对地址，具体配置参考如下代码：


output : {
 filename : '[name].js',
 // 不可配置为绝对路径,这是错误的配置
 //publicPath: "http://localhost:8080/dist/",

 // 这是正确的配置，
 publicPath: "/dist/",
 path : build,
 // umd包含了对amd、commonjs、var等多种规范的支持 
 libraryTarget : 'var' 
}

通过多次测试验证，当Webpack dev server的publicPath被注入到其他域名或协议下时，若配置为绝对地址，必定会引发上述错误。