webpack-dev-server live reloading 技術實現

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， 另一邊網頁實現自動更新。