关于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 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 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常用数学函数汇总
2014/11/21 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP自定义错误用法示例
2016/09/28 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
详解Vue方法与事件
2017/03/09 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
学生会主席竞聘书
2014/03/31 职场文书
学生安全责任书范本
2014/07/24 职场文书
联谊活动总结
2014/08/28 职场文书
优秀团员个人总结
2015/02/26 职场文书
学生安全责任协议书
2016/03/22 职场文书
MySQL约束超详解
2021/09/04 MySQL
python超详细实现完整学生成绩管理系统
2022/03/17 Python