基于webpack-hot-middleware热加载相关错误的解决方法


Posted in Javascript onFebruary 22, 2018

错误1:找不到__webpack_hmr

GET http://127.0.0.1/__webpack_hmr 404 (Not Found)

在webpack的entry配置添加引用路径'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true',相关的参数最好不要省略,否则会出现无法自动刷新的问题。

处理脚本如下:

// 准备webpack配置信息
let hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true',
 wpConfig = require('./webpack.config'),
 // 准备修改配置信息
 entries = Object.keys(wpConfig.entry)

// 添加热加载信息
entries.forEach((key) => {
 wpConfig.entry[key].push(hotMiddlewareScript);
})

// 添加插件信息
if(wpConfig.plugins === undefined) {
 wpConfig.plugins = []
}

// 添加热加载插件
wpConfig.plugins.push(
 new webpack.optimize.OccurrenceOrderPlugin(),
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin())

错误2:找不到hot-update.json

main.bundle.js:30 GET http://127.0.0.1/static/44588e3474a86cea5670.hot-update.json 404 (Not Found)

webpack配置中的publicPath必须是绝对地址,详细配置如下所示:

module.exports = {
 // 其他配置信息略
 // ……
 output : {
 path: configs.dist,
 // 必须是绝对地址
 publicPath: 'http://127.0.0.1/static/',
 filename : '[name].bundle.js',
 libraryTarget : 'var' 
 }
}

错误3:No ‘Access-Control-Allow-Origin' header

XMLHttpRequest cannot load http://127.0.0.1/static/df222441abc9ddb6a616.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

不可思议,在本地访问竟然会出现AJAX跨域问题,仔细检查后发现,浏览器把localhost与127.0.0.1当成了两个不同的域,解决的方法很多,只说最简单的一种,访问应用时,尽量采用与webpack配置中的publicPath完全一致的路径,如在本文中,最好的访问方法是输入http://127.0.0.1/访问本地应用。

错误4:OccurenceOrderPlugin构造器错误

new webpack.optimize.OccurenceOrderPlugin(),
TypeError: webpack.optimize.OccurenceOrderPlugin is not a constructor
 at Object.<anonymous> (E:\Workspace\vue-hot\dev-server.js:23:6)
 at Module._compile (module.js:570:32)
 at Object.Module._extensions..js (module.js:579:10)
 at Module.load (module.js:487:32)
 at tryModuleLoad (module.js:446:12)
 at Function.Module._load (module.js:438:3)
 at Module.runMain (module.js:604:10)
 at run (bootstrap_node.js:394:7)
 at startup (bootstrap_node.js:149:9)
 at bootstrap_node.js:509:3

此问题一般出现在webpack 2中,解决办法很简单,将OccurenceOrderPlugin改为OccurrenceOrderPlugin即可。

总结

webpack编译程序有两种热加载方式,webpack-dev-server与webpack-hot-middleware方式,从webpack 2的性能来看,webpack-dev-server完全能够满足开发的需要,但最大的问题在于,webpack-dev-server不能向外发布服务,只能在本地访问。

以上这篇基于webpack-hot-middleware热加载相关错误的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
巧用canvas
Jan 21 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
原生js调用json方法总结
Feb 22 #Javascript
You might like
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
浅谈javascript中自定义模版
2015/01/29 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
js获取元素下的第一级子元素的方法(推荐)
2017/03/05 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python如何使用函数做字典的值
2019/11/30 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
opencv实现图像几何变换
2021/03/24 Python
汽车维修专业毕业生的求职信分享
2013/12/04 职场文书
服装设计专业求职信
2014/06/16 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书
新闻通讯稿范文
2015/07/22 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
django中websocket的具体使用
2022/01/22 Python