webpack-dev-server live reloading 技术实现

Posted 2021-02-11 LightSong@计海拾贝

webpack-dev-server  live reloading

https://github.com/webpack/webpack-dev-server

Use webpack with a development server that provides live reloading.

开发者服务器，实现代码修改后，自动编译， 自动发布， 浏览器自动刷新动作。

具体实现，观察推测分析应该使用如下几种技术。

 

文件变化观测

文件变化后，会触发后续的一些列动作， 包括 代码编译 -》 构建结果发布 -》 前端浏览器自动刷新。

最关键的一步就是文件被修改了， 如何观测到？

应用层建立观测机制， 不太合理， 否则需要应用层做很多的轮询动作。所以需要系统支持。

 

https://zhuanlan.zhihu.com/p/37658721

使用 fs.watch

使用 fs 的另一个内置函数 watch 是更好的选择：

fs.watch(dir, (event, filename) => {});

watch 通过操作系统提供的文件更改通知机制，在 Linux 操作系统使用 inotify，在 macOS 系统使用 FSEvents,在 windows 系统使用 ReadDirectoryChangesW，而且可以用来监听目录的变化，在监听文件夹的场景中，比创建 N 个 fs.watchfile 效率高出很多。

https://www.ibm.com/developerworks/cn/linux/l-inotify/

inotify 介绍

从文件管理器到安全工具，文件系统监控对于的许多程序来说都是必不可少的。从 Linux 2.6.13 内核开始，Linux 就推出了 inotify，允许监控程序打开一个独立文件描述符，并针对事件集监控一个或者多个文件，例如打开、关闭、移动/重命名、删除、创建或者改变属性。在后期的内核中有了很多增强，因此在依赖这些特性之前，请先检查您的内核版本。

 

查看源码，服务器端实际使用了 chokidar 库来检测文件变化。

const chokidar = require(\'chokidar\');

 

编译触发&发布

解决了文件变化观测的机制， 在文件检测的回调函数中， 自动触发 开发版本的webpack编译， 依据配置 webpack.dev.config.json

这个阶段是同步，执行完毕后， 并将编译结果拷贝到目标文件中。

最后会想浏览器发送消息， 有代码变动的消息， 并指示浏览器进行更新， 辅助开发者调试结果。如何通知呢？

 

sockjs建立实时通信通道

客户端和服务器使用sockjs库实现socket实时通信，在后端检测到文件变化， 且编译发布完成后， 会主动通知前端， 前端执行刷新动作。

 

客户端sockjs-client

https://github.com/webpack/webpack-dev-server/tree/master/client-src/sockjs

\'use strict\';

module.exports = require(\'sockjs-client\');

https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js

 

const sockjs = require(\'sockjs\');

 

 

其它

有博客提供了类似的功能的实现方法：

http://www.cnblogs.com/mengbaobao/p/4773662.html

 

使用开发工具IDE， ADOBE brackets也实现了类似功能， 一边写HTML CSS JS， 另外一边网页实现自动更新。