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

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. yii2 response响应配置

    response参数配置 方式一.全局配置 用于接口开发 适用:只有所有请求都是application/json类型时可用. $config = [ 'components' => [ 'res ...

  2. mac 非安全模式 开启

    https://github.com/callmelaoda/communicate/issues/8 open -a Google\ Chrome --args --disable-web-secu ...

  3. id、css命名规范

    main热点:hot新闻:news下载:download子导航:subnav菜单:menu子菜单:submenu搜索:search友情链接:friendlink页脚:footer版权:copyrigh ...

  4. 《操作系统真象还原》ELF文件

    下面是第五章部分内容的收获. 用C语言编写内核 一直以来我们都是用汇编语言编写程序的,但接下来我们或许很少用汇编语言编写代码了,大多数都是使用C语言.为什么要这样呢?书上的解释我看的不是很懂,只能结合 ...

  5. HTML文档快捷键

    一.web浏览器 1.刷新网页   F5 二.VS Code 常用快捷键 1.快速生成HTML代码 首先,建立一个空文档,选择编程语言为HTML: 其次,按下!(英文状态下),再按下tab键,就可以了 ...

  6. JNA 使用总结

    JNA 是基于 JNI(Java Native Interface) 技术的开源工具,能够实现单方向的 Java 调用本地方法(通常是 C/C++ 编写的动态链接库中的函数),在 Windows 中是 ...

  7. Bootstrap资料

    Bootstrap手册  : https://www.jqhtml.com/bootstraps-syntaxhigh/index.html 中文文档 :https://v3.bootcss.com/ ...

  8. phpstorm格式化数组

    如果我们想要的这样的数组格式的话,可以设置 <?php $arr = array["a" => 0, "b" => 1, "c&qu ...

  9. 将本地文件git到远程github仓库

    使用git管理项目是开发人员必备的技能,下面就介绍如何使用git将本地文件管理并且同步到github上面. 小白可以参考 创建SSH-key并且在github中添加认证 在本地用户的.ssh文件下面生 ...

  10. C# 获取当前登录IP

    public static string GetUserIp() { string ip; string[] temp; bool isErr = false; if (System.Web.Http ...