脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack-hot-middleware热加载相关错误的解决方法

基于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热加载相关错误的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 微信小程序文字显示换行问题

    微信小程序文字显示换行问题

    这篇文章主要介绍了微信小程序文字显示换行问题，文中给出了解决方案,需要的朋友可以参考下
    2019-07-07
  • JS新包管理工具yarn和npm的对比与使用入门

    JS新包管理工具yarn和npm的对比与使用入门

    在2016年10月11日facebook 公开了新的javascript包管理工具 yarn, 用来替代目前被广泛使用的npm(nodejs 自带的包管理工具)，本文将介绍yarn工具带来的优点和使用入门，以及对比npm解决了什么问题，带来哪些便利。有需要的朋友们下面来一起看看吧。
    2016-12-12
  • 如何检测JavaScript的各种类型

    如何检测JavaScript的各种类型

    在写js脚本的时候我们必须对一件事保持警惕，就是避免异常的发生。在本篇文章里面，我想谈谈一部分类型检测，有需要的可以参考学习。
    2016-07-07
  • 原生javascript实现分页效果

    原生javascript实现分页效果

    这篇文章主要为大家详细介绍了原生javascript实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS出现失效的情况总结

    JS出现失效的情况总结

    本篇文章主要对JS出现失效的情况进行总结。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）

    JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）

    这篇文章主要介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化（二）的相关资料,需要的朋友可以参考下
    2016-02-02
  • js密码强度检测

    js密码强度检测

    这篇文章主要介绍了js密码强度检测的相关资料，并给出了详细代码，需要的朋友可以参考下
    2016-01-01
  • js判断上传文件后缀名是否合法

    js判断上传文件后缀名是否合法

    这篇文章主要介绍了js判断上传文件后缀名是否合法的具体方法，以一个完整实例分析了javascript判断上传文件后缀名是否合法的方法，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • layui数据表格 table.render 报错的解决方法

    layui数据表格 table.render 报错的解决方法

    今天小编就为大家分享一篇layui数据表格 table.render 报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript初学者常用技巧

    javascript初学者常用技巧

    这篇文章主要介绍了javascript初学者常用技巧,包括javascript的存放位置、格式及焦点事件等,需要的朋友可以参考下
    2014-09-09

最新评论