基于webpack-hot-middleware热加载相关错误的解决方法

 更新时间:2018年02月22日 16:10:29   作者:蚁方阵  
下面小编就为大家分享一篇基于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热加载相关错误的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • js手机号4位显示空格,银行卡每4位显示空格效果

    js手机号4位显示空格,银行卡每4位显示空格效果

    这篇文章主要介绍了js手机号4位显示空格,银行卡每4位显示空格效果,手机号和银行卡号,按照每4位显示一个空格的需求,非常具有实用价值,需要的朋友可以参考下。
    2017-03-03
  • 悄悄用脚本检查你访问过哪些网站的代码

    悄悄用脚本检查你访问过哪些网站的代码

    YouPorn是YouTube的成人自拍版,Alexa排名61。如果你登陆YouPorn主页,它会悄悄用脚本检查你访问过哪些色情网站。
    2010-12-12
  • 莱鸟介绍window.print()方法

    莱鸟介绍window.print()方法

    这篇文章主要介绍了莱鸟介绍window.print()方法的相关资料,需要的朋友可以参考下
    2016-01-01
  • 浅谈webpack 构建性能优化策略小结

    浅谈webpack 构建性能优化策略小结

    webpack以其丰富的功能和灵活的配置而深受业内吹捧,逐步取代了grunt和gulp成为大多数前端工程实践中的首选,这篇文章主要介绍了浅谈webpack 构建性能优化策略小结,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • 微信小程序开发之实现摇色子游戏

    微信小程序开发之实现摇色子游戏

    这篇文章主要为大家详细介绍了如何通过微信小程序开发一个简单的摇色子游戏,文中的示例代码讲解详细,感兴趣的小伙伴可以和小编一起学习一下
    2023-01-01
  • JS实现仿苹果底部任务栏菜单效果代码

    JS实现仿苹果底部任务栏菜单效果代码

    这篇文章主要介绍了JS实现仿苹果底部任务栏菜单效果代码,可实现鼠标滑过显示大图标功能,涉及javascript鼠标事件及页面元素遍历并修改属性的技巧,需要的朋友可以参考下
    2015-08-08
  • 使用原生js写ajax实例(推荐)

    使用原生js写ajax实例(推荐)

    下面小编就为大家带来一篇使用原生js写ajax实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • 前端在浏览器端播放直播流协议的2种方式讲解

    前端在浏览器端播放直播流协议的2种方式讲解

    直播依赖录播所需要的播放技术,同时依赖HTTP FLV或者WebSocket中的一种协议来传输FLV,这篇文章主要给大家介绍了关于前端在浏览器端播放直播流协议的2种方式,需要的朋友可以参考下
    2024-07-07
  • JS基于封装函数实现的表格分页完整示例

    JS基于封装函数实现的表格分页完整示例

    这篇文章主要介绍了JS基于封装函数实现的表格分页,结合完整实例形式分析了javascript针对table表格数据的遍历、读取以及模拟分页显示的相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • Javascript拖拽&拖放系列文章3之细说事件对象

    Javascript拖拽&拖放系列文章3之细说事件对象

    Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似,用来给事件处理程序传递状态信息,从而进行相应的操作。这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性,并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中,从而适应所有的浏览器。
    2008-09-09

最新评论