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

一、问题描述

[HMR] Hot Module Replacement is disabled.

二、问题分析

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

  1. devServer: {
  2. historyApiFallback: true,
  3. open: true,
  4. hot: true,
  5. inline: true,
  6. overlay: true
  7. }

三、解决方案

1、webpack.dev.config.js

  1. devServer: {
  2. historyApiFallback: true,
  3. open: true,
  4. overlay: true
  5. }

2、package.json

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

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

四、答疑解惑

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

  1. 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. Linux-监控目录及文件

    Linux-通过inotifywait监控目录及文件 inotifywait命令的使用此处就不写了:可以参考文章:https://www.cnblogs.com/martinzhang/p/41269 ...

  2. jmeter笔记(3)--响应结果中文乱码的解决方式

    1.举例 新建HTTP请求访问百度首页,响应结果如下: 2.原因 Jmeter安装目录/bin/jmeter.properties中sampleresult.default.encoding默认为IS ...

  3. NOIp2018提高组 双栈排序

    这真是道神奇的题目: 原题链接 首先我们要证明以下的性质: 若原序列为\(\{a_n\}\),\(a_i\)和\(a_j\)不能同时放入一个栈中,当且仅当\(i<j,a_i<a_j\),且 ...

  4. Linux Centos7.x下安装部署Jira和confluence以及破解方法详述

    简述 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. Confluence是一个专业的企业知识管 ...

  5. bootstrap浅谈

    学习地址:http://www.runoob.com/bootstrap/bootstrap-tutorial.html 自己练习了下 主要是使用了bootstrap中包含的class类样式,只要给相 ...

  6. 异步请求之ajax

    一.初识ajax 1.下载引入jQuery <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"& ...

  7. saltstack主机管理项目:动态调用插件解析-模块解析(五)

    一.动态调用插件解析 1.目录结构 1.base_module代码解析: def syntax_parser(self,section_name,mod_name,mod_data): print(& ...

  8. Java进程线程笔记

    什么是并行和并发? 并发和并行是即相似又有区别:(微观) 并行:指两个或多个事件在同一时刻发生: 强调的是时间点. 并发:指两个或多个事件在同一时间段内发生: 强调的是时间段. 进程和线程的区别? 进 ...

  9. NOI-OJ 1.13 ID:23 区间内的真素数

    整体思路 这里需要大量使用素数,必须能够想到只求出M到N之间的素数是不够的,因为M到N之间数字的反序有可能是大于M或小于N的数字,例如M=2,N=20,那么19的反序91大于20,所以使用埃拉拖色尼算 ...

  10. JAVA关于字符串&&字符数组处理的小题目

    JAVA关于字符串&&字符数组的小题目 第二题:分析以下需求,并用代码实现 1.键盘录入一个大字符串,再录入一个小字符串 2.统计小字符串在大字符串中出现的次数 3.代码运行打印格式: ...