关于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 相关文章推荐
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
基于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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP中常用的转义函数
2014/02/28 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
js仿360开机效果
2019/12/26 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
基于Python的文件类型和字符串详解
2017/12/21 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
python地震数据可视化详解
2019/06/18 Python
python和JavaScript哪个容易上手
2020/06/23 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
银行会计财务工作个人的自我评价
2013/10/29 职场文书
实习生辞职信范文
2015/03/02 职场文书
表扬信格式模板
2015/05/05 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript