webpack热更新

HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用

使用HMR,就可以实现只将修改的模块实时替换至应用中,不必完全刷新整个应用

在webpack里配置HMR

const webpack = require('webpack')
module.exports = {
  // ...
  devServer: {
    // 开启 HMR 特性
    hot: true
    // hotOnly: true
  }
}

所以,HMR并不像 Webpack 的其他特性一样可以开箱即用,需要有一些额外的操作

我们需要去指定哪些模块发生更新时进行HRM,如下代码:

if(module.hot){
    module.hot.accept('./util.js',()=>{
        console.log("util.js更新了")
    })
}

实现原理

一:

  • 通过webpack-dev-server创建两个服务器:提供静态资源的服务器(express)和socket服务

  • express server负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)

  • scoket server是一个websocket的长连接,双方可以通信

  • 当socket server监听到对应的模块发生变化时,会生成两个文件.json和.js文件

  • 通过长连接,socket server可以直接将这两个文件主动发送给客户端

  • 浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新

    二:

    1、启动webpack生成compiler实例,compiler上有很多方法,例如监听本地文件的变化
    2、使用express框架启动本地server,让浏览器可以请求本地的静态资源
    3、启动websocket服务,当本地文件发生变化,可以立即告知浏览器可以热更新代码

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值