错误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热加载相关错误的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
问题内容: 我开始在开发使用的服务器端渲染应用程序的环境中工作。我对每个Webpack包在开发和生产(运行时)环境中的作用感到非常困惑。 这是我的理解摘要: :是一个软件包,是一种工具,用于将Web应用程序的不同部分结合在一起,然后捆绑成一个.js文件(通常是)。然后,结果文件将在产品环境中提供以由应用程序加载,并包含运行代码的所有必需组件。功能包括缩小代码,缩小代码等。 :是一个提供 服务器 以
本文向大家介绍WIN2003 IIS相关错误的解决方法,包括了WIN2003 IIS相关错误的解决方法的使用技巧和注意事项,需要的朋友参考一下 我碰到的主要问题是:“Server Application Unavailable 错误”、“无法显示网页”: 1、如果你的.NET版本是2.0及以上的话,那要注意了:win2003是默认安装1.1的,安装.NET2.0 后,可能会程序应用程序池冲突,具体
我开始工作与与环境开发一个服务器端渲染应用程序与。我对每个webpack包在dev和prod(运行时)环境中的作用感到非常困惑。 以下是我理解的总结: :是一个包,一个工具,用于将web应用程序的不同部分连接在一起,然后捆绑在一个单独的包中。js文件(通常是)。然后,结果文件在prod环境中提供,由应用程序加载,并包含运行代码所需的所有组件。功能包括缩小代码、缩小尺寸等。 :是一个提供服务器来处理
本文向大家介绍webpack实现热加载自动刷新的方法,包括了webpack实现热加载自动刷新的方法的使用技巧和注意事项,需要的朋友参考一下 本文介绍了webpack实现热加载自动刷新的方法,分享给大家,具体如下: 一、webpack-dev-server 一个轻量级的服务 功能:修改代码及时呈现到浏览器上。 第一步:安装 第二步:写入到依赖 第三步:修改webpack配置文件 说明:如果想指定
这个怎么解决? 把他们调换顺序也不对
本文向大家介绍webpack+vue+express(hot)热启动调试简单配置方法,包括了webpack+vue+express(hot)热启动调试简单配置方法的使用技巧和注意事项,需要的朋友参考一下 前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 web