一文大白话讲清楚webpack基本使用——6——热更新及其原理

一文大白话讲清楚webpack基本使用——6——热更新及其原理

1. 建议按文章顺序从头看，一看到底，豁然开朗

• 第一篇：
• 一文大白话讲清楚啥是个webpack
• 第二篇：
• 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
• 第三篇
• 一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用
• 第四篇
• 一文大白话讲清楚webpack基本使用——3——图像相关loader的配置和使用
• 第五篇
• 一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用
• 第六篇
• # 一文大白话讲清楚webpack基本使用——5——babel的配置和使用
• 然后看本篇，webpack的热更新及其原理

2. 啥是热更新HMR

• HMR,Hot Module Replacement,翻译为热重载。有人就问了，不是热更新么，怎么是热重载。你可这么理解，热重载是原理，它导致的效果就是热更新。你怎么更新，那不得重载。就这么简单
• 热更新，简单点说，就是webpack提供的一项开发环境中的功能，在开发过程中，如果代码（理解为模块更准确，因为webpack万物皆模块）有改动，不需要刷新页面，可以实时更新修改的模块

3. 热更新怎么用

• 用法很简单，只要我们在webpack.config.js中启用热模块替换就行

devServer:{
    hot:true
}

• 然后我们安装webpack serve

npm install webpack-dev-server

• 然后再package.json里面配置快速启动

"dev": "webpack serve"

• 然后启动server

npm run dev

-可以看到顺利启动，我们复制http://localhost:8080/到浏览器运行，

• 然后修改stylesheet/index.scss的p-border的border为15个像素，保存，返回到浏览器，别刷新，看到border已经是15px了，很好
• 如果你是双屏幕开发，那就真的很带劲

4.热更新的原理

• 既然我们改了代码，然后浏览器就同步了，说明什么

• 说明他两肯定通信了，而且要一直保持通信，只要我这边改代码了，就要通知你

• 那明了了，肯定是websocket通信没跑了

• 我们修改了边框以后，浏览器建立一个ws
  

• 但是通信的双方具体是谁呢，通信都发什么呢

• 首先，我们运行npm run dev,发现只给了地址，但是dist下面没有打包出来东西，但是我们在浏览器访问地址的时候却能访问到东西，说明啥，首先webpack Dev Server得有能像build那样那js源代码打包成bundle.js的东西（webpack Compile)），而且还得有一个存储bundle.js的地方(Bundle Server)

• 其次，我们在浏览器就运行了地址，也没创建websocket啊，怎么就能通信了，那只能说明你访问了这个地址后，webpack Dev Server给浏览器注入了一个websocket,注入到哪了呢，到bundle.js里面了,具体注入了个啥呢（HMR Runtime）

• 再者，我们更新了代码以后，没有刷新，但是能局部更新，那说明webpack Devops Server肯定有一个将更新代码通过websocket发送给bundle.js的东西(HMR Server)

• 最后，bundle.js既有我们的代码，又有注入进来的websocket，他是怎么工作的呢

• 别着急，事情理清楚了，我们画一张图
  

• 这就是webpack Dev Server 和Browser之间的关系图

• 还不够明白是吧，别着急

• 咱再上流程图
  

• 这下看明白了吧

• 再文字总结一下吧

1. 通过webpack-dev-server创建两个服务器，提供静态资源的服务express和Socket服务
2. express Server负责直接提供静态资源服务
3. socket server建立长连接，保持双方通信
4. 如果socket server监听到模块发生变化时，会生成manifest和update chunk
5. 通过websocket发送给给客户端
6. 客户端执行更新逻辑