基于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 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
js实现右键自定义菜单
Dec 03 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
TS 类型收窄教程示例详解
Sep 23 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
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
python中管道用法入门实例
2015/06/04 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
python配置grpc环境
2019/01/01 Python
如何在Django项目中引入静态文件
2019/07/26 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
标准化管理实施方案
2014/02/25 职场文书
有趣的广告词
2014/03/18 职场文书
团员个人年度总结
2015/02/26 职场文书
房产遗嘱范本
2015/08/06 职场文书
中秋节随笔
2015/08/15 职场文书
导游词之无锡古运河
2019/11/14 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
关于python类SortedList详解
2021/09/04 Python
Python保存并浏览用户的历史记录
2022/04/29 Python
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL