理解 webpack 热更新

一、开启：HotModuleReplacementPlugin/--hot

二、webpack 编译构建后，控制台出现：

1、新的 hash 值 // 作为下次热更新的标识

2、新的 json 文件 // h 代表新 hash，c 代表要热更新的模块

3、新的 js 文件 // 本次修改后的代码

三、热更新实现原理：

1、启动 webpack 生成 compiler 实例，compiler 上有很多方法，例如监听本地文件的变化

2、使用 express 框架启动本地 server，让浏览器可以请求本地的静态资源

3、启动 websocket 服务，当本地文件发生变化，可以立即告知浏览器可以热更新代码

四、启动本地服务前在入口增加两个文件

1、获取 websocket 客户端代码

2、根据配置获取 webpack 热更新代码路径

五、过程：

1、监听 webpack 编译结束，通过 websocket 给浏览器发送通知，ok 和 hash 事件，浏览器拿到最新的 hash 值做更新检查逻辑

2、webpack-deb-server 主要职责：启动服务和前置准备工作

3、webpack-dev-middleware 主要职责：本地文件的编译和输出以及监听

4、浏览器接收到通知，hash 事件：更新最新一次打包后的 hash 值。ok事件：进行热更新检查

5、利用上一次保存的 hash 值，发送 xxx/hash.hot-update.json 的 ajax 请求，获取热更新模块

6、通过 jsonp 方式发送 xxx/hash.hot-update.js 请求，使用 jsonp 可以直接执行代码，更新代码，而不用刷新页面更新。

理解 webpack 热更新相关推荐

【Webpack】1047- 轻松理解webpack热更新原理
一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...
webpack热更新原理
webpack热更新原理文章目录 webpack热更新原理一.什么是热更新? 二.webpack热更新基本原理 1.修改webpack.config.js的entry配置 2.启动本地服务 3.监 ...
webpack热更新原理-连阿珍都看懂了
前言在旧开发的时代,前端项目在开发的过程中修改代码,很有可能是手动切到浏览器刷新页面来看到改动效果.操作不方便且页面之前的编辑记录也都丢失,体验可以说为0.想象一下一个表达你努力填满了所有输入项,结 ...
修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...
webpack热更新实现
原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...
less webpack 热更新_webpack---less+热更新使用
最近尝试用less写界面,webpack进行打包,然后发现每次修改less时都需要重新执行webpack打包一下,于是就想到了webpack热更新这个功能. 一.使用less less是一门css预处 ...
webpack热更新和常见错误处理
时间:2016-11-03 10:50:54 地址:https://github.com/zhongxia245/blog/issues/45 webpack热更新一.要求局部刷新修改的地方二. ...
webpack 热更新原理解析
一.什么是 HMR HMR 全称 Hot Module Replacement,中文语境通常翻译为模块热更新,它能够在保持页面状态的情况下动态替换资源模块,提供丝滑顺畅的 Web 页面开发体验. 1. ...
webpack热更新
什么是模热更新?有什么优点模块热更新是webpack的一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新. 在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版的自动刷新浏览器. 优 ...

理解 webpack 热更新

理解 webpack 热更新相关推荐

最新文章

热门文章