关于Webpack dev server热加载失败的解决方法

利用Webpack dev server作为热加载服务器时，出现以下错误：

XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost' is therefore not allowed access.

或者出现以下的警告信息：

dev-server.js:37 [HMR] Update failed: Error: Manifest request to http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json timed out.
 at XMLHttpRequest.request.onreadystatechange (http://localhost:8080/dist/main.js:38:22)

经过诊断，配置错误的地方在于webpack.config.js的publicPath，需要将绝对地址改为相对地址，如下：

output : {
 filename : '[name].js',
 // 不可配置为绝对路径,这是错误的配置
 //publicPath: "http://localhost:8080/dist/",

 // 这是正确的配置，
 publicPath: "/dist/",
 path : build,
 // umd包含了对amd、commonjs、var等多种规范的支持
 libraryTarget : 'var'
}

经过反复的测试，将webpack dev server的publicPath注入到其他域下，如果使用绝对地址配置，一定会出现上述错误。

需要特别注意的是，webpack dev server与webpack-hot-middleware刚好相反，webpack-hot-middleware必须使用绝对地址。

以上这篇关于Webpack dev server热加载失败的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 基于webpack-hot-middleware热加载相关错误的解决方法
  • webpack实现热加载自动刷新的方法
赞 (0)

相关推荐

  • webpack实现热加载自动刷新的方法

    webpack实现热加载自动刷新的方法

    本文介绍了webpack实现热加载自动刷新的方法,分享给大家,具体如下: 一.webpack-dev-server 一个轻量级的服务 功能:修改代码及时呈现到浏览器上. 第一步:安装 npm install webpack-dev-server -g 第二步:写入到依赖 npm install webpack-dev-server --save-dev 第三步:修改webpack配置文件 module.exports = { entry:"./js/index.js", output:

  • 基于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 hotMiddlewareScrip

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • 使用webpack配置react-hot-loader热加载局部更新

    目录 webpack配置react-hot-loader热加载局部更新 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 react-hot-loader热加载不生效的可能问题 总结 webpack配置react-hot-loader热加载局部更新 有人会问 webpack-dev-server 已经是热加载了,能做到只要代码修改了页面也自动更新了,为什么在 react 项目还要安装 react-hot-loader 呢? 其实这两者的更新是有区别的,webpack-dev-server 的热加载

  • js针对图片加载失败的处理方法分析

    本文实例讲述了js针对图片加载失败的处理方法.分享给大家供大家参考,具体如下: 在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error([[data],fn])这个函数: $("img").error(function(){ //当图片加载失败时,你要进行的操作 //$(this).attr('src','images/no_pic.jpg')

  • Vue Router的懒加载路径的解决方法

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的平衡点. 解决办法 .vue模块文件按需加载,其实要做到两件事情:一是标记出这是一个异步组件:二是通知webpack把该组件单独产出为一个chunk. vue的异步组件 官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个Promise,只是Promise的resolve函数的参数是常规组

  • SQL Server 2008 R2登录失败的解决方法

    SQL Server 2008 R2登录失败的解决方法

    为大家分享SQL Server 2008 R2登录失败的解决方法 1.启动SQL Server 2008 Management Studio,会看到 2.里面有一个 身份验证.这个 身份验证 的下拉列表里面有两个选项: Windows 身份验证 和 SQL Server 身份验证. 它们有什么区别: Windows 身份验证是指:你可以使用你电脑Windows系统的用户名和密码进行登入.如果你的电脑没有设置密码,那么就不需要输入用户名和密码,直接点击连接就可以登入. 我们一般使用第二种身份验证:

  • 关于layui的下拉搜索框异步加载数据的解决方法

    思路分析:当我使用layui默认的下拉搜索框的时候,layui会默认渲染出一个HTML结构,所以我把渲染出来的这个结果直接给复制出来,这样css的样式就不用从头到尾写一遍了, 前端代码(我用的是jsp): <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC &quo

  • 详解关于webpack多入口热加载很慢的原因

    之前为公司搭建了套webpack多页面应用脚手架,起初用得挺爽,资源整合打包,组件化开发,各种组件复用,需要什么就拿什么,后来入口有50个页面了,慢慢的发现了每次按保存后的热加载等待时间越来越长,需要等待10几秒,实在太影响开发效率,于是我查找原因. 观察发现,每次到热加载时会在emitting HtmlWebpackPlugin这停留很久. 于是我想知道它到底停留了多长时间呢? 在package.json内加入--profile,它会告诉你编译过程中哪些步骤耗时最长. 停止npm,重新运行we

  • IE8中使用javascript动态加载CSS的解决方法

    众所周知做前端开发的都恨不得踹IE开发者几脚,IE开发者名声之差不低于GFW开发者,昧着良心搞坏市场,人人得而诛之,但是在中国这些地方市场占有率摆在那里,没办法只能向现实低头. 最近我们产品需要在浏览器里动态载入一段CSS,以前的代码是直接用的: 复制代码 代码如下: var bubbleCss = document.createElement('style');bubbleCss.type = 'text/css';bubbleCss.innerHTML = blc_conf.bubbleSt

  • iscroll动态加载数据完美解决方法

    本文实例为大家分享了iscroll动态加载数据的具体代码,供大家参考,具体内容如下 <div id="wrapper" class="margin-b90"> <div id="scroller"> <div id="pullDown"> <span class="pullDownLabel" style="text-align: center;"

随机推荐