实现webpack-dev-server过程原理
搭建的node服务借助webpack-dev-middleware和webapck-hot-middleware中间件实现webpack-dev-server过程原理
1. webpack-dev-middleware以一个中间件的形式安装
2. webpack-dev-middleware插件会监听编译器的事件(比如说保存事件)
3. 本地起的dev-server服务通过webpack-hot-miiddleware中间件不断向client端以eventstream形式定时向客户端发送消息(消息内容:本地文件发生变化的hash,消息类型)
4. 当监听到编译器的保存事件之后,dev-server会立即先客户端发送一个building消息,说明正在代码正在编译的过程中
5. 当本地代码编译完成之后,client端会向本地的dev-server服务拿到对应的热模块替换数据
问题:
第5步客户端是如何判断本地代码是否已经编译完成了呢,因为我们的本地服务会定时给客户端推送本地代码的编译后的hash字符串消息,客户端会监听这个消息,
同时拿到新hash和本地之前的旧hash做对比,如果hash变化了,说明本地修改的代码已经编译完成,此时client端立即向本地服务请求最新的更新代码模块进行替换数据