关于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下获取div中的数据的原理分析
Apr 07 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
jquery实用技巧之输入框提示语句
Jul 28 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
懒加载实现的分页&&网站footer自适应
Dec 21 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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 SFTP实现上传下载功能
2017/07/26 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
js的.innerHTML = ""IE9下显示有错误的解决方法
2013/09/16 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
2019/06/27 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
python如何实现word批量转HTML
2020/09/30 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
C语言基础笔试题
2013/04/27 面试题
幼教个人求职信范文
2013/12/02 职场文书
物流业务员岗位职责
2014/02/08 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
社会工作专业求职信
2014/07/15 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
新手入门Mysql--sql执行过程
2021/06/20 MySQL
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript