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


Posted in Javascript onFebruary 22, 2018

利用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热加载失败的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
js 操作select相关方法函数
Dec 06 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 #Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 #Javascript
webpack-dev-server自动更新页面方法
Feb 22 #Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 #Javascript
实现jquery放大镜的两种方法
Feb 22 #jQuery
JavaScript正则表达式函数总结(常用)
Feb 22 #Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 #Javascript
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
PHP的5个安全措施小结
2012/07/17 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
weiphp微信公众平台授权设置
2016/01/04 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
python 实现生成均匀分布的点
2019/12/05 Python
python判断元素是否存在的实例方法
2020/09/24 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
网管求职信
2014/03/03 职场文书
2014年教研室工作总结
2014/12/06 职场文书
主持稿开场白
2015/06/01 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技