搞懂webpack熱更新原理
https://juejin.im/post/5d6d0ee5f265da03f66ddba9
WebSocket實現簡單的webpack HMR(熱更新)效果
https://kknews.cc/code/2y86nb9.html
webpack熱模組替換（HMR）/熱更新
https://blog.csdn.net/Real_Bird/article/details/62927644
模組熱替換(hot module replacement)
https://webpack.docschina.org/concepts/hot-module-replacement/
HMR原理：
1.Server端使用webpack-dev-server去啟動本機服務，HMR內部實現主要使用了webpack、express、websocket。服務時，HMR使用express啟動本機服務，當流覽器訪問資源時對此做回應，服務端和用戶端使用websocket實現長連接，此時webpack監聽原始檔案的變化，當開發者保存檔時就觸發webpack的重新編譯。
2.webpack每次編譯都會生成hash值，並且改動模組的json檔，改動模組代碼的js檔，編譯完成後再通過socket向用戶端推送當前編譯的hash戳。而在用戶端的websocket，當監聽到有文件改動推送過來的hash戳，就會和上一次對比。若一致則走緩存，若不一致則通過ajax和jsonp向服務端獲取最新資源，並使用記憶體檔案系統去替換有修改的內容，實現局部刷新。
#Javascript, HMR, hot module replacement, 熱更新
https://juejin.im/post/5d6d0ee5f265da03f66ddba9
WebSocket實現簡單的webpack HMR(熱更新)效果
https://kknews.cc/code/2y86nb9.html
webpack熱模組替換（HMR）/熱更新
https://blog.csdn.net/Real_Bird/article/details/62927644
模組熱替換(hot module replacement)
https://webpack.docschina.org/concepts/hot-module-replacement/
HMR原理：
1.Server端使用webpack-dev-server去啟動本機服務，HMR內部實現主要使用了webpack、express、websocket。服務時，HMR使用express啟動本機服務，當流覽器訪問資源時對此做回應，服務端和用戶端使用websocket實現長連接，此時webpack監聽原始檔案的變化，當開發者保存檔時就觸發webpack的重新編譯。
2.webpack每次編譯都會生成hash值，並且改動模組的json檔，改動模組代碼的js檔，編譯完成後再通過socket向用戶端推送當前編譯的hash戳。而在用戶端的websocket，當監聽到有文件改動推送過來的hash戳，就會和上一次對比。若一致則走緩存，若不一致則通過ajax和jsonp向服務端獲取最新資源，並使用記憶體檔案系統去替換有修改的內容，實現局部刷新。
#Javascript, HMR, hot module replacement, 熱更新
留言
張貼留言