首页 > web前端 > js教程 > 在Webpack dev server中出现热加载失败的问题

在Webpack dev server中出现热加载失败的问题

亚连
发布: 2018-06-05 15:05:58
原创
1619 人浏览过

下面我就为大家分享一篇关于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)
登录后复制

经过诊断,配置错误的地方在于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注入到其他域下,如果使用绝对地址配置,一定会出现上述错误。

需要特别注意的是,webpack dev server与webpack-hot-middleware刚好相反,webpack-hot-middleware必须使用绝对地址。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在JavaScript中如何复制内容到剪贴板

在vue element中如何实现批量删除功能

在使用React组件中转 Vue 组件的命令写法有哪些?

以上是在Webpack dev server中出现热加载失败的问题的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板