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 ...
随机推荐
- bzoj5028小Z的加油店(线段树+差分)
题意:维护支持以下两种操作的序列:1 l r询问a[l...r]的gcd,2 l r x把a[l...r]全部+x 题解:一道经典题.根据gcd(a,b)=gcd(a-b,b)以及区间加可知,这题可以 ...
- 寒冬之下,移动开发没人要了? 浅谈 iOS 开发者该 何去何从?
前言: 作者 | 梅梅 文章来源 CSDN 对于移动互联网而言,2018 年像是球场上的一声裁判哨.哨声响起,高潮迭起的上半场结束.本该再创辉煌的下半场,还没开赛却被告之:规则改变.场地收缩.教 ...
- vmware(1):vmware中的bridge、nat、host-only的区别
VMWare提供了三种工作模式,它们是bridged(桥接模式).NAT(网络地址转换模式)和host-only(主机模式) bridged(桥接模式) 在这种模式下,VMWare虚拟出来的操作系统就 ...
- 收藏这些Safari快捷键,让你的Mac浏览网页更加方便
文章内容及图片来源于:知乎,如果涉及版权问题,请联系作者删除 文章收录于:风云社区(提供上千款各类mac软件的下载) Safari是Mac上的原生浏览器,功能自然很强大,现在每天在Mac上使用的最多的 ...
- Python之False和None
这个其实在Python文档当中有写了,为了准确起见,我们先引用Python文档当中的原文: In the context of Boolean operations, and also when ex ...
- VMWare的host-only/bridged/NAT连接图文介绍
1 VMware简介 VMWare虚拟机软件是一个“虚拟PC”软件,它使我们可以在一台机器上同时运行二个或更多Windows.Linux等系统. 如果我们需要使用多个系统的话,传统的方式有两种: .使 ...
- SCI,EI,ISTP
SCI: Science Citation Index EI: The Engineering Index ISTP: Index to Scientific & Technic ...
- django登录
一. form表单使用注意事项: 1. action="" 提交地址, method='post' 请求方式 2. input 标签要有name属性才能被获取 3. 有一个inpu ...
- python3编程练习题
记录一些基础编程练习题和一些遇见的坑 1)输出0到100的数字,如果数字是3的倍数输出Fizz,5的倍数输出Buzz.同时是3和5的倍数输出FizzBuzz,其他情况则打印原数字 for i in r ...
- easyui系列一 下拉框之组合框combobox
一.基础组合框 示例 <select class="easyui-combobox" name="state" style="width:200 ...