基于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 相关文章推荐
js日期时间补零的小例子
Mar 05 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 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
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php常见的魔术方法详解
2014/12/25 PHP
php计算年龄精准到年月日
2015/11/17 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Python线程详解
2015/06/24 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python实现感知机(PLA)算法
2017/12/20 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
高级销售员求职信
2013/10/25 职场文书
大学生毕业自我鉴定范文
2013/11/03 职场文书
财务管理专业自荐信范文
2013/12/24 职场文书
前台文员岗位职责
2013/12/28 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
自主招生英文自荐信
2015/03/25 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server