本文主要是介绍webpack-模块热替换剖析，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
webpack-模块热替换剖析 目录
文章目录
- 前言
- 推荐阅读
- 前提
- `HMR`
- 应用
- 开启`HMR`
- 开启`webpack-dev-server`的`HMR`
- 手动添加代码
- `HMR`原理
- 步骤
前言
- 主要讲解热更新的原理
推荐阅读
- 《webpack实战 入门、进阶与调优》
前提
- 早期调试代码基本都是
改代码 - 刷新网页 - 查看 - 修改代码 - 第一次提升效率：工具检测到代码改动，自动重新构建，然后触发网页刷新，称为：
live reload - 第二次提升：
webpack不刷新的前提下得到改动，甚至不需要重新发起请求就能看到更新后的效果，成为：模块热替换功能(Hot Module Replacement)，简称HMR
HMR
- 保留页面当前状态的前提下呈现出最新的改动，节省时间成本
应用
- 复杂系统每改动一次，要经历资源重构建、网络请求、浏览器渲染等过程，需要几十秒
- 调式页面很深的层级，有时候需要人配合验证
开启HMR
- 基于
webpack-dev-server或者webpack-dev-middle，webpack本身不支持HMR
开启webpack-dev-server的HMR
npm i webpack-dev-server -D
const webpack = require('webpack');
module.exports = {plugins: [new webpack.HotModuleReplacementPlugin()],devServer: {hot: true,},
};
- 注意：
webpack-cli的版本需要为3.3.10，才能和web-pack-server一起使用
调用HMR API有两种方式：
- 手动地添加代码
- 利用现成的工具：
react-hot-loader, vue-loader
手动添加代码
// index.js
import { add } from 'util.js';
add(2, 3);if(module.hot) {module.hot.accept();
}
- 当发现有模块发生变动时，
HMR会再当前浏览器环境下重新执行一遍index.js，但是页面本身不会刷新
HMR原理
- 在开启
HMR的状态下进行开发，会出现资源的体积比原本的大，因为webpack会注入很多相关的代码 - 在本地开发环境下，浏览器是客户端，
webpack-dev-seerver(WDS)相当于服务端 HMR的核心：客户端从服务端拉取更新后的资源(不是拉取整个资源文件，而是chunk diff，即chunk需要更新的部分)
步骤
- 浏览器拉取更新的时间。
WDS对本地源文件进行监听，与浏览器之间构建了一个websocket- 当本地资源发生变化时，
WDS会向浏览器推送更新事件，并带上本次构建的hash，让客户端与上一次资源进行比对 - 通过
hash比对可以防止冗余更新的出现 live reload也是依赖websocket实现的
- 拉取资源内容。
- 客户端如果知道了新的构建结果和当前的有了差别，就会向
WDS发起一个请求来获取更改文件的列表，即哪些模块有了改动 - 通常这个请求的名字为：
[hash].hot-update.json - 客户端返回：
main.[hash].hot-update.js
这篇关于webpack-模块热替换剖析的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
