关于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 相关文章推荐
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
jQuery功能函数详解
Feb 01 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
js this 绑定机制深入详解
Apr 30 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函数getenv简介和使用实例
2014/05/12 PHP
php实现无限级分类
2014/12/24 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP中的类型约束介绍
2015/05/11 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
javascript 自动转到命名锚记
2009/01/10 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
详解在Python中处理异常的教程
2015/05/24 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
大四自我鉴定范文
2013/10/06 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
大学生志愿者感言
2014/01/15 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
中药学专业求职信
2014/05/31 职场文书
租房安全协议书
2014/08/20 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
售后服务承诺函格式
2015/01/21 职场文书
导游欢迎词范文
2015/01/23 职场文书
工作失职自我检讨书
2015/05/05 职场文书
第二次离婚起诉书
2015/05/18 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2022/04/07 Python