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

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

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

js 复制代码

devServer:{
    hot:true
}

js 复制代码

npm install webpack-dev-server

js 复制代码

"dev": "webpack serve"

js 复制代码

npm run dev

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

既然我们改了代码，然后浏览器就同步了，说明什么
说明他两肯定通信了，而且要一直保持通信，只要我这边改代码了，就要通知你
那明了了，肯定是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之间的关系图
还不够明白是吧，别着急
咱再上流程图
这下看明白了吧
再文字总结一下吧