【Webpack】HMR 热更新
HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。
不使用热更新，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会；如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，只会重新编译修改的代码，将新的模块发送到客户端，替换掉旧的模块，不必完全刷新整个应用。
实现 HMR 的关键是在客户端和服务器端之间建⽴⼀个 WebSocket 连接，当代码发⽣变化
时，服务器端会将新的模块发送给客户端，客户端接收到新的模块后会⽤新模块替换旧模块，从⽽实现实时更新。
const webpack = require('webpack')
module.exports = {
// ...
devServer: {
// HMR
hot: true
// hotOnly: true
}
}
具体来说，webpack HMR 主要分为以下⼏个步骤：
- webpack-dev-server 将打包输出 bundle 。
- 每当文件发生变更时，webpack 将会重新编译，webpack-dev-server 将会监控到此时文件变更事件，并找到其对应的 module。
- webpack-dev-server 将会把变更模块通知到浏览器端，此时使用 websocket 与浏览器进行交流。
- 浏览器根据 websocket 接收到 hash，并通过 hash 以 JSONP 的方式请求更新模块的 chunk。
- 浏览器加载 chunk，并使用新的模块对旧模块进行热替换，并删除其缓存。
原文地址：https://blog.csdn.net/XiugongHao/article/details/140576170
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！