webpack4.41.0配置四(热替换)

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

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环境搭建和简单使用就到此结束啦！之后需要自己多结合项目去深入理解！

原文地址：https://www.cnblogs.com/ahaMOMO/p/11632242.html

时间： 2024-09-30 15:37:55

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

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

1.查看node.js版本.npm版本和webpack版本(使用webpack4时,请确保node.js的版本>=8.9.4) 2.我先重新卸载了webpack和webpack-cli(全局) npm uninstall -g webpack-cli npm uninstall -g webpack 3.全局安装webpack-cli和webpack npm install webpack-cli -g npm install webpack -g 4.测试一下webpack4的新特性,不用配置

vCenter6.0配置四：从模板部署虚拟机

本文主要介绍虚拟机通过模板和自定义规范的快速创建与交付,主要分为转换虚拟机为模板.创建自定义规范文件.从模板部署虚拟机并应用自定义规范三个步骤. 一.部署环境二.转换虚拟机为模板 1.将虚拟机WIN10关机,并转换为模板 2.模板创建完成三.创建客户机自定义规范 1.创建windows自定义规范 2.选择在部署向导中输入计算机名称: 3.网络选择典型设置,应用的是DHCP,如果选择自定义设置,还可以设定在部署向导中输入IP地址: 4.加入域,填写相关账户信息 5.生成新的SID: 6.完成:

(十四)配置的热更新

这一节演示下配置的热更新,即不用重启网站,更改配置文件的信息,网站也能同步更改.还是继续沿用OptionsBindSample 实现也比较简单,改下Index.cshtml 1 @using Microsoft.Extensions.Options 2 @inject IOptionsSnapshot<OptionsBindSample.Class> ClassAccesser //原来的IOptions改成IOptionsSnapshot 3 @{ 4 ViewData["Titl

Java 类的热替换 —— 概念、设计与实现

别人的一篇技术博客,直接摘抄过来,免得再查看找不到了(本人在看的过程中可能会对原文格式或文字有修改) 原文地址:http://blog.163.com/web_promise/blog/static/109631655201222804931240/ 在本文中,我们将不对 Java ClassLoader 的细节进行过于详细的讲解,而是关注于与构建在线升级系统相关的基础概念.关于 ClassLoader 的详细细节有许多资料可以参考,有兴趣的读者可以自行研读. 要构建在线升级系统,一个重要的技术

Class热替换与卸载

概述名词解释:所谓热部署,就是在应用正在运行的时候升级软件,却不需要重新启动应用.本文主要是分析Tomcat中关于热部署和JSP更新替换的原理,在此之前先介绍class的热替换和class的卸载的原理. Class热替换 ClassLoader中重要方法: loadClass:ClassLoader.loadClass(…) 是ClassLoader的入口点.当一个类没有指明用什么加载器加载的时候,JVM默认采用AppClassLoader加载器加载没有加载过的class,调用的方法的入口就是

基于Instrumentation的JAVA代码热替换

理类用来获取 Instrumentation 实例 package com.codeconch.util; import java.lang.instrument.Instrumentation; public class Monitor { private static Instrumentation instrumentation; public static void premain(String args, Instrumentation inst) { instrumentation

【转】class卸载、热替换和Tomcat的热部署的分析

这篇文章主要是分析Tomcat中关于热部署和JSP更新替换的原理,在此之前先介绍class的热替换和class的卸载的原理. 一 class的热替换ClassLoader中重要的方法 loadClass ClassLoader.loadClass(...) 是ClassLoader的入口点.当一个类没有指明用什么加载器加载的时候,JVM默认采用AppClassLoader加载器加载没有加载过的class,调用的方法的入口就是loadClass(...).如果一个class被自定义的ClassLo

Java 类的热替换---转载

构建基于 Java 的在线升级系统 Java ClassLoader 技术剖析在本文中,我们将不对 Java ClassLoader 的细节进行过于详细的讲解,而是关注于和构建在线升级系统相关的基础概念.关于 ClassLoader 的详细细节许多资料可以参考,有兴趣的读者可以自行研读. 要构建在线升级系统,一个重要的技术就是能够实现 Java 类的热替换 —— 也就是在不停止正在运行的系统的情况下进行类(对象)的升级替换.而 Java 的 ClassLoader 正是实现这项技术的基础. 在

vue+webpack热替换

项目地址:http://pan.baidu.com/s/1i5KCXBf 今天上午和同事完成了在mac上面调试了我的框架,最后发现问题出在window系统和mac系统在表示路径的时候出现问题,在解决这个问题后,在同事的建议下,对项目的目录做了一个优化,把所有的资源文件放在assets目录,打包后去掉了一层pro目录这样看上去清爽了很多,下午开始了最坑爹的热替换. 热替换其实很早就开始研究了,但是一直没有头绪,今天是要必须解决了,具体解决方式: 1:我决定单独把热替换的配置代码写在一个文件里,然后