webpack5 基础配置8 devServer 模块热替换HMR, 框架的HRM， HRM原理

dev Server

之前运行一直是手动打开页面，修改代码后，每次都要run build非常麻烦。

第一种是通过watch来解决，每次代码一修改就自动编译然后重新渲染。

可以看到刚我们修改了代码，重新自动编译了。
第二种写法

但这种方式也有弊端。目前我们使用的是watch监听代码的改变从而重新编译生成新的Build，然后通过vscode的插件，live-server监听文件的变化，从而重新渲染页面。但其实效率不高，因为只要有一个文件改变，所有源代码都要重新编译，要重新生成新的Bundle.js文件，live-server是vscode的专属工具，不是webpack专属的。Live-server每次都会刷新整个页面，我们改变一点的话也会全部刷新。

第二种就是devServer

webpack-dev-server（WDS）
cnpm install webpack-dev-server -D
基本使用

默认帮我们跑在了8080的端口
通过webpack-dev-server是不会生成任何文件的，build里面是没东西的。并且现在还是会全局刷新，后续通过HMR(hot module replacement)热更新，优化。
那么为什么没有生成文件呢，因为生成新的文件是会进行文件操作的，文件操作的性能较低。所以dev-server将编译后的结果放在内存里，然后从内存去加载文件。早期webpack-dev-server用了一个名叫memory-fs的库，（webpack自己编写的），但现在用了memfs的库，就是通过这个库将编译结果放在内存里，要用的时候再取出来。

最简单的webpack-dev-server的使用就完成了。

webpack-dev-middleware

上节讲到，webpack-dev-server开启了一个本地服务器，这个本地服务器实际上是通过Node的express框架来建立的。
那如果我们想开启koa或者http服务器呢。
就可以使用webpack-dev-middleware。来看看如何自定义服务器
cnpm install webpack-dev-middleware express

开启


可以看到正常使用了。这就是webpack-dev-middleware的基本使用。

认识hot module replacement 模块热替换（HMR）

指应用程序运行过程中，替换删除，添加某个模块，而不需要刷新整个页面。
我们上面所讲的，watch,webpack-dev-server的基本使用，都是刷新整个页面的。
HMR的好处
1 不需要重新加载整个页面，保留原来的状态
2 只需要改变变化的内容，节省开发时间
3 修改css js源代码会立即在浏览器更新
我们来配置一下
首先我们不能使用watch webpack-dev-middleware
必须使用webpack-dev-server，因为这个库已经实现了HRM的功能了。

除此之外，还需要自己配置哪个模块需要热更新，

这样就能完成基本的热更新需求了。 如果模块太多，一个个加没必要，后续补上如何自动添加热更新的模块。

框架的HRM

react的话目前是已经放弃了，使用react-refresh
先来看看reacr的
配置基本的react配置后，

可以看到已经正常使用了。
当我们修改时，这时候我们还没有做热替换，react默认刷新也是刷新全部。
react脚手架也是通过react-refresh来配置热替换的。
那普通使用，怎么配置呢，
cnpm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh
借助这个插件

因为我们是要对每个jsx进行react-refresh配置的，所以可以借助babel-loader

这样就配置完成了。
更新的时候
可见已经完成了热替换，不会再更新整个页面。

小结 webpack-dev-server开启的本地服务器，是不会进行热替换的，所以我们需要借助HRM，来进行配置，因为webpack-dev-server已经内部实现了HRM，所以只需要在webpack.config.js文件中配置devServer开启hot。然后再对我们需要热替换的模块进行，module.hot.assept(‘模块路劲’,()=>{回调函数})开启热替换。

框架的话，脚手架也是帮我们实现了热替换。如react的react-refresh，Vue的vue-loader。如果我们自己配置react，想要开启热替换其实也很容易，只需要安装react-refresh，与react-refresh-webpack-plugin这两个插件，然后通过配置，因为每个jsx模块一般都要开启热替换，所以直接再jsx的匹配babel-loader中去配置react-refresh。

接着是Vue

Vue的话只需要我们用vue-loader加载Vue文件，就会自动帮我们进行热替换了。
而且我们前面讲过，vue-loader需要借助一个插件来帮忙，
就是vue-loader中的plugin。
这样就可以实现vue的热替换了。

HRM的原理

webpack-dev-server是会帮我们创建两个服务的，一个是静态资源的服务express,一个是HRM server ,Socket服务(net.Socket)
express负责提供静态资源的服务（打包后的资源直接被浏览器i请求和解析）
一般express是http请求，短链接，短连接我们都知道服务器无法主动推送，每次请求结束后就会断开连接。
所以我们可以借助socket长连接。

socket可以在服务器和浏览器建立长连接，服务器可以主动推送数据给浏览器，每次服务器监听到一些模块改变后，服务器就会生成json，和一个js文件，然后主动发送两个文件到浏览器，然后通过HRM runtime机制，通过这两个文件中的变化，更新UI。

可以看到除了express，还有socket。本质其实是webSocket(H5新推),内部其实是封装这个，然后形成HRM server.

HRM原理小结

webpack-dev-server(简称WDS)内部已经实现了HRM，WDS提供两个服务，一个是基于http请求的express服务器，处理静态资源。http是短连接，一般相应结束即断开，服务器无法主动推送数据给浏览器，除非发送给浏览器信号如etag等让浏览器主动请求，但是每次都会请求整个文件，也不好。

第二个服务则是WDS实现了i记得HRM server。内部封装了底层为WebSocket的socket长连接，服务器可以主动推送数据给浏览器。每次服务器监听的抹开一改变，就会生成两个文件，json记录着变化，还有一个js文件，服务器主动推送这两个文件给浏览器，浏览器通过HRM的runtime机制，根据文件的变化从而渲染更新部分的UI，达到热替换的效果。