首先声明,之前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. Python3 与 C# 并发编程之~ 协程篇

      3.协程篇¶ 去年微信公众号就陆陆续续发布了,我一直以为博客也汇总同步了,这几天有朋友说一直没找到,遂发现,的确是漏了,所以补上一篇 在线预览:https://github.lesschina.c ...

  2. python利用selenium库识别点触验证码

    利用selenium库和超级鹰识别点触验证码(学习于静谧大大的书,想自己整理一下思路) 一.超级鹰注册:超级鹰入口 1.首先注册一个超级鹰账号,然后在超级鹰免费测试地方可以关注公众号,领取1000积分 ...

  3. 主席树[可持久化线段树](hdu 2665 Kth number、SP 10628 Count on a tree、ZOJ 2112 Dynamic Rankings、codeforces 813E Army Creation、codeforces960F:Pathwalks )

    在今天三黑(恶意评分刷上去的那种)两紫的智推中,突然出现了P3834 [模板]可持久化线段树 1(主席树)就突然有了不详的预感2333 果然...然后我gg了!被大佬虐了! hdu 2665 Kth ...

  4. IDEA 破解

    推荐三篇文章  : 1:    https://blog.csdn.net/nishiwodebocai21/article/details/71359619?fps=1&locationNu ...

  5. MTD下的Nand驱动

    目录 MTD下的Nand驱动 引入 平台设备资源文件 关键数据结构 平台框架 s3c24xx_nand_probe nand_scan s3c2410_nand_add_partition add_m ...

  6. Matlab怎么修改显示数值格式/精度/小数位数

    参考:https://jingyan.baidu.com/article/7f41ecec1ad029593c095c70.html

  7. 用vim打开.py和.sh文件自动添加头

    在~/.vimrc文件最后一行添加 "auto add pyhton header --start autocmd BufNewFile *.py 0r ~/.vim/template/py ...

  8. HTML(六)HTML iframe 使用postMessage方法进行跨文档消息传递

    什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...

  9. vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失

    vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...

  10. INI配置文件的格式

    为什么要用INI文件?如果我们程序没有任何配置文件时,这样的程序对外是全封闭的,一旦程序需要修改一些参数必须要修改程序代码本身并重新编译,这样很不好,所以要用配置文件,让程序出厂后还能根据需要进行必要 ...