每次修改都要去编译，这个操作比较繁琐。所以我们希望编译过程是自动化的，而且页面的更新也是自动化的。所以需要使用这个热替换

1.首先安装webpack-dev-server：npm install  webpack-dev-server -D(-D生产环境下)

（作用为：启动服务并且能够支持热替换）

2.更改一下我们的配置文件

3.启动webpack-dev-server

因为我们没有全局安装webpack-dev-server，所以不能在终端输入webpack-dev-server去启动，我们需要去package.json中创建命令

之所以这个方式可以，是因为它们查找的方式不一样，它会先去mode_modules文件夹中寻找webpack-dev-server。在终端直接输入webpack-dev-server会去path路径中去找。

执行npm run start

启动之后可以去浏览器中输入localhost:8080访问页面

然后可以在template.html中修改页面内容，即可得到立即更新

4.添加热替换功能

然后重新npm run start,现在就是具备热替换功能的服务器了

当hotOnly:false时，我们在页面进行了更改只需要保存，不需要进行页面更新就可以得到修改过后的数据

所以说这是一个坑，我们可以把hotOnly在配置中去掉，webpack都具备热替换的功能(只是webpack4和webpack3不一样的地方，webpack3需要明确的指出hotOnly才会具备热替换的功能)

最后webpack4.41.0环境搭建和简单使用就到此结束啦！之后需要自己多结合项目去深入理解！
最后附上我学习Webpack中的学习视频：https://www.bilibili.com/video/av51893932/

webpack4.41.0配置四(热替换)的更多相关文章

  1. webpack4.41.0配置三（插件minCssExtract/ DefinePlugin/Html）

    (注:如无特殊说明这里的配置文件都指的是webpack.config.js) minCssExtract 我们通常期望js和js文件一起,css和css文件一起.该插件将CSS提取到单独的文件中.它为 ...

  2. webpack4.41.0配置二（加载器_url-loader/babel-loader/sass-loader）

    loader是webpack用来预处理源文件的,比如typesrcipt形式的文件最终都得转成浏览器可以执行的js文件 (注:以下的配置代码不一定与下方一摸一样,具体与官网上https://webpa ...

  3. webpack4.41.0配置一（基础配置webpack文件，入口出口，实现打包）

    1.查看node.js版本.npm版本和webpack版本(使用webpack4时,请确保node.js的版本>=8.9.4) 2.我先重新卸载了webpack和webpack-cli(全局) ...

  4. vscode 自动修复 setting.json 修改完，得重启浏览器 # 新版（>1.41.0）配置 vscode #解决了

    vscode 自动修复 setting.json 修改完,得重启浏览器,不用 npm run dev 就能看到效果 "editor.codeActionsOnSave": { &q ...

  5. .NET CORE 2.0小白笔记（五）：配置的热更新、配置的框架设计

    配置的热更新 什么是热更新:一般来说,我们创建的项目都无法做到热更新:即项目无需重启,修改配置文件后读取到的信息就是修改配置之后的 我们只需要吧项目中用到的IOptions改成IOptionsSnap ...

  6. Java_类的热替换

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-hotswapcls/#ibm-pcon Java ClassLoader 技术剖析 在本文中,我们 ...

  7. Java 类的热替换---转载

    构建基于 Java 的在线升级系统 Java ClassLoader 技术剖析 在本文中,我们将不对 Java ClassLoader 的细节进行过于详细的讲解,而是关注于和构建在线升级系统相关的基础 ...

  8. nginx1.9.4 +php 5.5.29+yii2.0配置手册

    nginx1.9.4 +php 5.5.29+yii2.0配置手册 目录 一.    php5.5.29安装配置    2 二.    nginx1.9.4安装配置    2 三.    yii2.0 ...

  9. 【webpack】-- 模块热替换

    全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...

随机推荐

  1. 树莓派3B从装系统到安装RYU过程

    1.首先安装的是2019-09-26-raspbian-buster-lite系统 2.更换成国内源 更改apt源 sudo nano /etc/apt/sources.list(更改apt源) de ...

  2. python3练习100题——051

    题目:学习使用按位与 & . 不会的知识点,查了一下按位运算. 按位运算符是把数字看作二进制来进行计算的. 运算符 描述 实例 & 按位与运算符:参与运算的两个值,如果两个相应位都为1 ...

  3. qsort 与sort 对结构体排序实例

    qsort 与sort 对结构体排序实例 #include<bits/stdc++.h> using namespace std; typedef struct { string book ...

  4. git三剑客笔记

    看了git三剑客视频总结的笔记,只给自己参考. 常用命令 查看分支:git branch 创建分支:git branch <name> 切换分支:git checkout <name ...

  5. openssl 生成免费证书

    原文链接:https://www.cnblogs.com/tugenhua0707/p/10927722.html 一:什么是openssl? 它的作用是?应用场景是什么? 即百度百科说:openss ...

  6. Codeforces Round #350 (Div. 2)(670C)

    今天对着算法进阶指南,学了一下离散化.大概对桶排这样的算法优化比较好吧. 离散化:就是把无穷大的集合中若干个元素映射为有限集合以便于统计的方法.例如在很多时候,问题范围定义为整数集合Z,但涉及的元素只 ...

  7. 2018ICPC南京站Problem J. Prime Game

    题意: 对于所有数字分解质因子,如果某个质因子在这个区间出现,则贡献为1,求所有质因子对所有区间做的贡献. 解析: 考虑如果所有全部区间都有这个质因子则这个质因子的贡献是n*(n+1)/2,对于任意因 ...

  8. UI自动化测试的Page Object模式

    在UI级的自动化测试框架中,当页面样式改变或者页面元素属性改变,那么代码也要随之进行修改,如何做到高效快速的修改代码来适应这些改变呢,这个时候可以引入Page Object模式,也是页面对象设计模式. ...

  9. Maven2: Missing artifact but jars are in place

    那是因为没有update project. 项目右键,maven-update project.

  10. java 学习（day1）

    之前学java没好好听课,会一点又不熟练,于是准备重新开始学一些细节,记录每日所学新知识. a+b java的a+b很有意思,当你输出的是" "+a+b,先假设a=2,b=3.然后 ...