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， 另外一邊網頁實現自動更新。
webpack-dev-server live reloading 技術實現