脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Webpack dev server热加载失败

关于Webpack dev server热加载失败的解决方法

 更新时间：2018年02月22日 16:25:20   作者：蚁方阵  
下面小编就为大家分享一篇关于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必须使用绝对地址。

以上这篇关于Webpack dev server热加载失败的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • bootstrap选项卡扩展功能详解

    bootstrap选项卡扩展功能详解

    这篇文章主要为大家详细介绍了bootstrap选项卡扩展功能，增加关闭，超出一行显示下拉，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • JS实现改变HTML上文字颜色和内容的方法

    JS实现改变HTML上文字颜色和内容的方法

    这篇文章主要介绍了JS实现改变HTML上文字颜色和内容的方法,涉及JS数学运算与页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-12-12
  • JS、CSS以及img对DOMContentLoaded事件的影响

    JS、CSS以及img对DOMContentLoaded事件的影响

    最近在做性能有关的数据上报，发现了两个非常有意思的东西：Chrome开发者工具的Timeline分析面板，以及DOMContentLoaded事件。一个是强大的令人发指的性能分析工具，一个是重要的性能指标，于是就用Timeline对DOMContentLoaded事件进行了一番研究
    2014-08-08
  • js实现简洁的TAB滑动门效果代码

    js实现简洁的TAB滑动门效果代码

    这篇文章主要介绍了js实现简洁的TAB滑动门效果代码,通过简单的JavaScript自定义函数动态遍历页面元素实现tab滑动切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript深拷贝的一些踩坑记录

    JavaScript深拷贝的一些踩坑记录

    这篇文章主要给大家介绍了关于JavaScript深拷贝的一些踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 深度解析JavaScript中的filter()方法

    深度解析JavaScript中的filter()方法

    在JavaScript中,filter()是一个数组方法,用于从数组中过滤出符合特定条件的元素,并返回一个新数组,本文将带大家深度解析JavaScript中的filter()方法,需要的朋友可以参考下
    2023-09-09
  • 小程序使用watch监听数据变化的方法详解

    小程序使用watch监听数据变化的方法详解

    这篇文章主要介绍了小程序使用watch监听数据变化的方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 深度剖析JavaScript作用域从局部到全局一网打尽

    深度剖析JavaScript作用域从局部到全局一网打尽

    这篇文章主要为大家介绍了JavaScript作用域的深度剖析，从局部到全局一网打尽，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)

    js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)

    搞定js的加密和压缩，一方面可以提高页面加载性能，另外一方面也希望辛苦研发出来的成果得到一定的保护,感兴趣的朋友可以了解下，或许对你有所帮助
    2013-01-01
  • JavaScript中标识符提升问题

    JavaScript中标识符提升问题

    标识符指的是javascript中定义的符号，标识符可以由任意顺序的大小写字母、数字、下划线和美元符号组成，但标识符不能以数字开头，也不能是javascript中的保留关键字。并且要注意，javascript是严格区分大小写的。
    2015-06-06

最新评论