webpack的devServer配置错误
首先声明,之前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配置错误的更多相关文章
- webpack window dev-server配置
1.安装webpack dev-server npm install --save-dev webpack webpack-dev-server 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
- webpack + vuejs 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...
- webpack安装与配置初学者踩坑篇
webpack是基于nodejs开发出来的前端工具 webpack可以处理js文件的依赖关系,webpack能够处理js的兼容问题,把高级浏览器不识别的语法转换成浏览器正常识别的语法 (jnlp是基于 ...
- vue2+webpack 开发环境配置
前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...
- 深入浅出 webpack 之基础配置篇
前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...
- vue第二单元(webpack的配置-学习webpack的常用配置)
第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的 ...
- Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建
一 使用环境: windows 7 64位操作系统 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载 https: ...
- react+webpack开发环境配置
react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就 ...
- webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js
今天学习了dev-server这个配置,中间遇到疑惑,我写了contentBase是可以走通,可以再localhost:8080看到页面并且正确加载bundle.js的,但是这个contentBase ...
随机推荐
- Python【第二篇】运算符及优先级、数据类型及常用操作、深浅拷贝
一.运算符及优先级 Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 1.算数运算符 运算符 描述 实例,a=20,b=10 + 加 a+b输出结果30 - 减 a-b输出结果 ...
- Java多线程、线程池和线程安全整理
多线程 1.1 多线程介绍 进程指正在运行的程序.确切的来说,当一个程序进入内存运行,即变成一个进程,进程是处于运行过程中的程序,并且具有一定独立功能. 1.2 Thread类 通 ...
- Java虚拟机垃圾回收(三) 7种垃圾收集器
Java虚拟机垃圾回收(三) 7种垃圾收集器 主要特点 应用场景 设置参数 基本运行原理 在<Java虚拟机垃圾回收(一) 基础>中了解到如何判断对象是存活还是已经死亡?在<Java ...
- django - 总结 - ORM性能
QuerySet 1.惰性查询 2.缓存机制 3.可迭代 4.可切片 -------------------------------------------------------在一个新创建的查询集 ...
- numpy&pandas基础
numpy基础 import numpy as np 定义array In [156]: np.ones(3) Out[156]: array([1., 1., 1.]) In [157]: np.o ...
- [物理学与PDEs]第2章习题1 无旋时的 Euler 方程
试证明: 当流场为无旋, 即 $\rot{\bf u}={\bf 0}$ 时, 理想流体的 Euler 方程可写为如下形式: $$\bex \cfrac{\p {\bf u}}{\p t}+\n \c ...
- jQuery UI弹出新窗体
借助jqueryUI 的Dialog 在隐藏的div中嵌入Iframe 改变iframe的路径 如果项目经常用到弹出新窗体,则利用模板,把此代码和html 放入父页面中,实现父级调用, <in ...
- python数据结构之堆(heap)
本篇学习内容为堆的性质.python实现插入与删除操作.堆复杂度表.python内置方法生成堆. 区分堆(heap)与栈(stack):堆与二叉树有关,像一堆金字塔型泥沙:而栈像一个直立垃圾桶,一列下 ...
- Coursera, Big Data 3, Integration and Processing (week 1/2/3)
This is the 3rd course in big data specification courses. Data model reivew 1, data model 的特点: Struc ...
- windows环境隐藏命令行窗口运行Flask项目
Linux下可以使用nohub来使Flask项目在后台运行,而windows环境下没有nohub命令,如何让Flask项目在windows中在后台运行而不显示命令行窗口呢? 1.写一个.bat脚本来启 ...