首先声明,之前vue项目没有报错,做react项目这样配置就报错了。

一、问题描述

[HMR] Hot Module Replacement is disabled.

二、问题分析

不太理解控制台为什么说热更新失效,然后页面出不来?还原现场。

devServer: {
        historyApiFallback: true,
        open: true,
        hot: true,
        inline: true,
        overlay: true
}

三、解决方案

1、webpack.dev.config.js

devServer: {
        historyApiFallback: true,
        open: true,
        overlay: true
}

2、package.json

"scripts": {
        "dev": "webpack-dev-server --hot --inline --config webpack.dev.config.js",
        "test": "echo \"Error: no test specified\" && exit 1"
    },

也就是说,不要在配置里面加hot和inline,要在命令行加。

四、答疑解惑

因为我在react项目中没有加热模块更新插件,如果加了下面的插件项,就可以只在webpack配置文件中指定devServer了,不用在命令行写。总之,这和react还是vue没有关系,这是webpack配置文件是否正确的问题。

new webpack.HotModuleReplacementPlugin()

webpack的devServer配置错误的更多相关文章

  1. webpack window dev-server配置

    1.安装webpack dev-server npm install --save-dev webpack webpack-dev-server 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  2. webpack + vuejs 基本配置(一)

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  3. webpack安装与配置初学者踩坑篇

    webpack是基于nodejs开发出来的前端工具 webpack可以处理js文件的依赖关系,webpack能够处理js的兼容问题,把高级浏览器不识别的语法转换成浏览器正常识别的语法 (jnlp是基于 ...

  4. vue2+webpack 开发环境配置

    前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...

  5. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  6. vue第二单元(webpack的配置-学习webpack的常用配置)

    第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...

  7. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  8. react+webpack开发环境配置

    react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...

  9. webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js

    今天学习了dev-server这个配置,中间遇到疑惑,我写了contentBase是可以走通,可以再localhost:8080看到页面并且正确加载bundle.js的,但是这个contentBase ...

随机推荐

  1. java 11 标准Java异步HTTP客户端

    这是 Java 9 开始引入的一个处理 HTTP 请求的的 HTTP Client API,该 API 支持同步和异步,而在 Java 11 中已经为正式可用状态,你可以在 java.net 包中找到 ...

  2. 51nod1812树的双直径(换根树DP)

    传送门:http://www.51nod.com/Challenge/Problem.html#!#problemId=1812 题解:头一次写换根树DP. 求两条不相交的直径乘积最大,所以可以这样考 ...

  3. 第十四节:再探MVC中路由的奥秘

    一. 基于RouteBase扩展 1. 原理 扩展RouteBase,同样使用的是MVC框架提供的MvcRouteHandler进行处理. 2. 步骤 1. 新建YpfRoute1类,继承RouteB ...

  4. django - 总结 - cookie|session

    Cookie是通过HTTP请求和响应头在客户端和服务器端传递的. 在Web开发中,使用session来完成会话跟踪,session底层依赖Cookie技术. --------------------- ...

  5. An Apple a day keeps the doctor away

    An apple a day keeps the doctor away. 一天一苹果,不用请医生. 活学活用:apple as like as an apple to an oyster 毫无相同之 ...

  6. Spring MVC 使用问题与解决--HTTP Status 500 - Servlet.init() for servlet springmvc threw exception

    1.HTTP Status 500 - Servlet.init() for servlet springmvc threw exception 解决 使用jre1.7 Spring4.3 2.spr ...

  7. jQuery.rotate.js(控制图片转动)

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  8. 什么是UDP

  9. elk搭建日志系统

    参考:https://www.cnblogs.com/yuhuLin/p/7018858.html 以上这篇文章已经写的很好很全了,之所以再自己写一遍大概就是记录一下,以后可能会有用吧 安装elast ...

  10. Dilated Convolution

    各种各样的卷积方式, 详细见 各种卷积的 gif 图 Convolution animations  Padding, strides Transposed convolution animatio ...