webpack-hot-middleware热加载相关错误的解决办法
2017-07-22 15:53
323 查看
http://blog.csdn.net/yiifaa/article/details/71550496?utm_source=itdadao&utm_medium=referral
错误1:找不到__webpack_hmr
GET http://127.0.0.1/__webpack_hmr 404 (Not Found)1
1
在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())1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
错误2:找不到hot-update.json
main.bundle.js:30 GET http://127.0.0.1/static/44588e3474a86cea5670.hot-update.json 404 (Not Found)1
1
webpack配置中的publicPath必须是绝对地址,详细配置如下所示:
module.exports = { // 其他配置信息略 // …… output : { path: configs.dist, // 必须是绝对地址 publicPath: 'http://127.0.0.1/static/', filename : '[name].bundle.js', libraryTarget : 'var' } }1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
错误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.1
1
不可思议,在本地访问竟然会出现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:31
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
此问题一般出现在webpack 2中,解决办法很简单,将OccurenceOrderPlugin改为OccurrenceOrderPlugin即可。
总结
webpack编译程序有两种热加载方式,webpack-dev-server与webpack-hot-middleware方式,从webpack 2的性能来看,webpack-dev-server完全能够满足开发的需要,但最大的问题在于,webpack-dev-server不能向外发布服务,只能在本地访问。
相关文章推荐
- 基于webpack-hot-middleware热加载相关错误的解决方法
- Microsoft.VisualBasic.PowerPacks相关错误解决办法
- kylin加载hive表错误:ERROR [http-bio-7070-exec-10] controller.TableController:189 : org/apache/hadoop/hive/conf/HiveConf java.lang.NoClassDefFoundError: org/apache/hadoop/hive/conf/HiveConf 解决办法
- Maven项目中 “错误: 找不到或无法加载主类" 的解决办法
- Listview 异步加载图片 快速滑动发生图片错误的解决办法 复用convertview
- 使用APMServ时出现“1、Apache启动失败,请检查相关配置。√MySQL5.1已启动。”错误的终极解决办法:
- ThinkPHP笔记——配置分组产生无法加载Index错误解决办法
- Linux 2.6.x 内核模块加载错误 “Invalid module format” 解决办法
- 关于ios 程序加载百度地图lib,出现链接错误:找不到符号 (null): _OBJC_CLASS_$_BMKMapManager的解决办法
- Oracle的oci.dll加载错误解决办法
- cygwin下git出现ca-bundle.crt相关错误的解决办法
- dedecms5.7sp1mysql导入数据时提示 USING BTREE 相关错误解决办法 本文来源于php教程
- u-boot移植时出现inline function 'coloured_LED_init' cannot be declared weak及相关错误时的解决办法!
- APMServ错误解决办法:1、Apache启动失败,请检查相关配置
- Oracle Data Pump 工具系列:Data Pump 权限配置相关错误及解决办法汇总
- .net AJAX运行错误【 未能加载文件或程序集 "System.Web....】的解决办法
- cygwin下git出现ca-bundle.crt相关错误的解决办法
- CMD命令行Java 错误:找不到或无法加载主类解决办法
- Android 图片加载Bitmap OOM错误解决办法
- [转]CENTOS 6.x INTEL集成显示驱动加载错误的解决办法