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

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. 第31届IMO 第2题

    题目 设n>=3,考虑一个圆上由2n-1个不同点构成的集合E.现给E中恰好k个点染上黑色,如果至少有一对黑点使得这两个黑点之间的弧上(两段弧中的某一个)包含恰好E中的n个点,就成这样的染色方法是 ...

  2. gulp常用插件之gulp-replace使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-replace这是一款gulp3的字符串替换插件. 更多使用文档请点击访问gulp-replace工具官网. 安装 一键安装不多解释 n ...

  3. nginx技术

    Nginx 处理高并发,单台服务器存在服务瓶颈 Nginx属于nio ,noblocking Io非阻塞式的 Apache属于Bio,Blocking IO 阻塞式的 安装部分 依赖安装:yum -y ...

  4. php 公众号开发

    思考: 1,优先使用php扩展库的sdk,配合微信文档. 2,公众号开发比较简单,重在业务. 公众号关联与消息分发 <?php namespace app\wap\controller; use ...

  5. splice删除元素后返回的是一个数组

    let arr = [51,68,98,78];let result = arr.splice(1,1);//[68]let arr2 = [51,68,98,78];let result2 = ar ...

  6. POJ 2096 Collecting Bugs (概率DP，求期望）

    Ivan is fond of collecting. Unlike other people who collect post stamps, coins or other material stu ...

  7. Codeforces Round #623 (Div. 2) D.Recommendations 并查集

    ABC实在是没什么好说的,但是D题真的太妙了,详细的说一下吧 首先思路是对于a相等的分类,假设有n个,则肯定要把n-1个都增加,因为a都是相等的,所以肯定是增加t小的分类,也就是说每次都能处理一个分类 ...

  8. Codeforces Round #617 (Div. 3) 题解

    又是隔了一年才来补题的我 A.B水题就不用说了 C - Yet Another Walking Robot C题我居然卡了一会,最后决定用map水,结果出来看了看题解,居然真的是map...没想到会出 ...

  9. K3/Cloud 执行计划任务错误排查

    计划任务的不执行原因可能有: 1.K3CloudJobProcess服务处于停止状态. 2.数据中心未勾选“允许执行计划任务”. 这种情况此数据中心下的所有计划任务都不会执行到. 3.第一次加进计划任 ...

  10. Qtree3 - 树链剖分

    打完以后才发现写复杂了……算了懒得改了 #include <bits/stdc++.h> using namespace std; ],fa[][],size[],wson[],vis[] ...