基于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 TO HTML 转换
Jun 26 Javascript
js 幻灯片的实现
Dec 06 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
wordpress之wp-settings.php
2007/08/17 PHP
实用函数10
2007/11/08 PHP
php变量范围介绍
2012/10/15 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python统计单词出现的次数
2018/04/04 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python实现统计代码行数的小工具
2019/09/19 Python
python实现双色球随机选号
2020/01/01 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
大学学习计划书范文
2014/05/02 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
公司会议策划方案
2014/05/17 职场文书
锅炉工岗位职责
2015/02/13 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python