基于webpack-hot-middleware热加载相关错误的解决方法
错误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热加载相关错误的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- TensorFlow核心使用要点
- “搜一搜”直达生活服务 微信连接移动消费新场景
- Linux服务器安全登录设置记录
- Linux系统下的ssh使用(依据个人经验总结)
- 从MapX到MapXtreme2004[4]-标注AutoLabel
- Linux下锁定账号,禁止登录系统的设置总结
- 深度解析 TypeConverter & TypeConverterAttribute (一)
- 从MapX到MapXtreme2004[7]-对Table、Feature等的理解
- 互联网赋能传统装企 “科技撬动力巨大”
- Python接口自动化-8-测试报告
- http应用优化和加速说明-负载均衡
- linux负载均衡总结性说明(四层负载/七层负载)
- 从MapX到MapXtreme2004[6]-标点心得
- silverlight3中的"伪"3D
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- rxjs里的Observable对象的pipe方法
- rxjs里的Observable对象和map配合的一个用法
- rxjs里的Observable对象subscribe方法的执行原理
- Java正则表达式
- kubernetes 二进制安装部署手册
- 接口
- Redis的各种数据类型实践--String字符串
- 必应API接口node.js版 - 极客玩家大白
- FFmpeg--简介
- 推荐系统中的常用算法——DeepWalk算法
- TypeError: cannot unpack non-iterable NoneType object
- 原型模式
- Spring 整合 Mybatis
- 数据库PostrageSQL-关闭服务器
- 快速配置Azure DevOps代理服务器