首先声明,之前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. prometheus 配置介绍

    prometheus 配置介绍 prometheus 配置分global.alerting.rule_files.scrape_configs 1.global(全局配置) scrape_interv ...

  2. mtd-utils 安装

    title: mkdosfs 安装 tags: linux date: 2018/12/26/ 17:08:54 --- mtd-utils安装 for 主机 在制作根文件系统中需要使用它制作jffs ...

  3. CMDB服务器管理系统【s5day89】:部分数据表结构-资产入库思路

    1.用django的app作为统一调用库的好处 1.创建repository app截图如下: 2.好处如下: 1.app的本质就是一个文件夹 2.以后所有的app调用数据就只去repository调 ...

  4. DirectX11 With Windows SDK--19 模型加载:obj格式的读取及使用二进制文件提升读取效率

    前言 一个模型通常是由三个部分组成:网格.纹理.材质.在一开始的时候,我们是通过Geometry类来生成简单几何体的网格.但现在我们需要寻找合适的方式去表述一个复杂的网格,而且包含网格的文件类型多种多 ...

  5. MySQL初步

    一 写在开头1.1 本节内容本节的主要内容是MySQL的基本操作(来自MySQL 5.7官方文档). 1.2 工具准备一台装好了mysql的ubuntu 16.04 LTS机器. 二 MySQL的连接 ...

  6. mysql数据库truncate表时间长处理

    [环境介绍] 系统环境:Linux + mysql 5.7.18 + 主从复制架构 [背景描述] 客户反映用在mysql数据库上truncate一个innode引擎的list分区100G左右表时,耗时 ...

  7. Collections of Zujin Zhang's Published works

    I am not good, but I shall do my best to be better. Any questions, please feel free to contact zhang ...

  8. [物理学与PDEs]第4章习题3 一维理想反应流体力学方程组的数学结构

    证明: Euler 坐标系下的一维反应流体力学方程组 (3. 10)-(3. 13) 也是一个一阶拟线性双曲型方程组. 证明: 由 (3. 10), (3. 12), (3. 13) 知 $$\bex ...

  9. javascript通过navigator.userAgent识别各种浏览器

    识别各种浏览器的实现原理是根据navigator.userAgent返回值识别: 实现: unction validBrowser(){ var u_agent = navigator.userAge ...

  10. PageUtil.java分页工具类

    package com.chabansheng.util; /** * 分页工具类 * @author Administrator * */ public class PageUtil { /** * ...