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

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. QS Network ZOJ - 1586 板子题

    #include<iostream> #include<algorithm> using namespace std; ; struct edge{ int a,b; doub ...

  2. Java多线程之synchronized和volatile

    概述 用Java来开发多线程程序变得越来越常见,虽然Java提供了并发包来简化多线程程序的编写,但是我们有必要深入研究一下,才能更好的掌握这块知识. 本文主要对Java提供的底层原语synchroni ...

  3. pandas玩转excel-> (2)如何利用pandas读取excel数据文件

    import pandas as pd #将excel文件读到内存中,形成dataframe,并命名为peoplepeople=pd.read_excel('D:/python结果/task2/Peo ...

  4. linux学习之编译-链接

    在Windows下使用习惯了IDE,导致我们对程序的编译链接没有一个清晰的认识,甚至混淆了编辑器和编译器的概念.在学习Linux时,这些问题就暴露出来了. 实际上,我们应该严格区分一个程序从产生到执行 ...

  5. k8s service的四种类型

    ClusterIp 默认类型,每个Node分配一个集群内部的Ip,内部可以互相访问,外部无法访问集群内部. NodePort 基于ClusterIp,另外在每个Node上开放一个端口,可以从所有的位置 ...

  6. 用Java在excel单元格中设置超链接

    (一)问题引入 有时候我们在导入数据到excel中时可能要给某个文件或图片设置超链接,例如链接到外网或者是本地的某个目录.我们可以通过Java代码来实现,借助POI库. (二)解决方案 下面直接给出参 ...

  7. The file is absent or does not have execute permission This file is needed to run this program

    tomcat下载后发现startup.sh文件启动不了 原因: 没有权限 解决方案:chmod 777 *.sh

  8. Python中numpy模块的简单使用

    # encoding:utf-8 import numpy as np data1 = np.array([1, 2, 3, 4, 5]) print(data1) data2 = np.array( ...

  9. windows10（家庭版）+ laradock 安装踩坑记一记

    Docker 安装: 首先我们需要在系统安装 Docker 的免费社区版,官方提供 Windows.Mac 及 Linux 等版本下载:下载地址.下载操作系统对应版本后,按照引导流程安装,最后打开 D ...

  10. python Threading模块源码解析

    查看源码: 这是一个线程控制的类,这个类可以被子类化(继承)在一定的条件限制下,这里有两种方式去明确活动:第一通过传入一个callable 对象也就是调用对象,一种是通过重写这个Thread类的run ...