摘要:應用源碼分析解讀結論熱更新的流程在構建項目時會創建服務端基于和客戶端通常指瀏覽器,項目正式啟動運行時雙方會通過保持連接,用來滿足前后端實時通訊。服務端源碼的關鍵部分每一個都是沒有屬性,表示沒有發生變化。
webpack-dev-server 簡介
Use webpack with a development server that provides live reloading. This should be used for development only.應用
It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.
將webpack與提供實時重新加載的開發服務器一起使用。 這應該僅用于開發。
它使用了引擎蓋下的webpack-dev-middleware,它提供了對webpack資產的快速內存訪問。
Getting Started
源碼分析解讀 1. 結論:熱更新的流程webpack在構建項目時會創建服務端(server基于node)和客戶端(client通常指瀏覽器),項目正式啟動運行時雙方會通過socket保持連接,用來滿足前后端實時通訊。
當我們保存代碼時,會被webpack監聽到文件變化,觸發新一輪編譯生成新的編譯器compiler(就是我們所說的Tapable實例。它混合在一起Tapable來吸收功能來注冊和調用插件本身,可以理解為一個狀態機。)。
在compiler的’done’鉤子函數(生命周期)里調用_sendStats發放向client發送ok或warning消息,并同時發送向client發送hash值,在client保存下來。
client接收到ok或warning消息后調用reloadApp發布客戶端檢查更新事件(webpackHotUpdate)
webpack/hot部分監聽到webpackHotUpdate事件,調用check方法進行hash值對比以及檢查各modules是否需要更新。如需更新會調用hotDownloadManifest方法下載json(manifest)文件。
hotDownloadManifest完成后調用hotDownloadUpdateChunk方法,通過jsonp的方式加載最新的chunk,之后分析對比文件進行文件的更新替換,完成整個熱更新流程。
注:以下源碼分析采用倒敘分析方式
2. webpack/hot 源碼解讀在webpack構建項目時,webpack-dev-server會在編譯后js文件加上兩個依賴文件:
/***/ (function(module, exports, __webpack_require__) { // 建立socket連接,保持前后端實時通訊 __webpack_require__("./node_modules/webpack-dev-server/client/index.js?http://localhost:8080"); // dev-server client熱更新的方法 __webpack_require__("./node_modules/webpack/hot/dev-server.js"); module.exports = __webpack_require__("./src/index.js"); /***/ })
webpack/hot/dev-server.js的文件內容:
/* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ /*globals window __webpack_hash__ */ if (module.hot) { var lastHash; //__webpack_hash__是每次編譯的hash值是全局的,就是放在window上 var upToDate = function upToDate() { return lastHash.indexOf(__webpack_hash__) >= 0; }; var log = require("./log"); var check = function check() { module.hot .check(true) // 這里的check方法最終進入到webpacklibHotModuleReplacement.runtime.js文件中 .then(function(updatedModules) { //檢查所有要更新的module,如果沒有module要更新那么返回null if (!updatedModules) { log("warning", "[HMR] Cannot find update. Need to do a full reload!"); log( "warning", "[HMR] (Probably because of restarting the webpack-dev-server)" ); window.location.reload(); return; } //檢測時候還有module需要更新,如果有=>check() if (!upToDate()) { check(); } //打印更新結果,所有需要更新的module和已經被更新的module都是updatedModules require("./log-apply-result")(updatedModules, updatedModules); if (upToDate()) { log("info", "[HMR] App is up to date."); } }) .catch(function(err) { //如果報錯直接全局reload var status = module.hot.status(); if (["abort", "fail"].indexOf(status) >= 0) { log( "warning", "[HMR] Cannot apply update. Need to do a full reload!" ); log("warning", "[HMR] " + (err.stack || err.message)); window.location.reload(); } else { log("warning", "[HMR] Update failed: " + (err.stack || err.message)); } }); }; //獲取MyEmitter對象 var hotEmitter = require("./emitter"); //監聽‘webpackHotUpdate’事件 hotEmitter.on("webpackHotUpdate", function(currentHash) { lastHash = currentHash; //根據兩點判斷是否需要檢查modules以及更新 // 1 對比服務端傳過來的最新hash值和客戶端的__webpack_hash__是否一致 // 2 調用module.hot.status方法獲取狀態 是否為 ‘idle’ if (!upToDate() && module.hot.status() === "idle") { log("info", "[HMR] Checking for updates on the server..."); check(); } }); log("info", "[HMR] Waiting for update signal from WDS..."); } else { throw new Error("[HMR] Hot Module Replacement is disabled."); }
加載最新chunk的源碼分析:
方法調用關系:module.hot.check=>HotModuleReplacement=>hotDownloadManifest=>hotEnsureUpdateChunk=>hotDownloadUpdateChunk
HotModuleReplacement模塊內容:
... function hotCheck(apply) { ... return hotDownloadManifest(hotRequestTimeout).then(function(update) { ... // 獲取到manifest后通過jsonp加載最新的chunk /*foreachInstalledChunks*/ // eslint-disable-next-line no-lone-blocks { /*globals chunkId */ hotEnsureUpdateChunk(chunkId); } ... }); } ... function hotEnsureUpdateChunk(chunkId) { if (!hotAvailableFilesMap[chunkId]) { hotWaitingFilesMap[chunkId] = true; } else { hotRequestedFilesMap[chunkId] = true; hotWaitingFiles++; hotDownloadUpdateChunk(chunkId); } }
webpack會根據不同運行環境(node / webworker / web)調用對應的方法(hotDownloadManifest & hotDownloadUpdateChunk)來加載chunk:,我們主要考慮web環境下的方法
// eslint-disable-next-line no-unused-vars function webpackHotUpdateCallback(chunkId, moreModules) { //... } //$semicolon // eslint-disable-next-line no-unused-vars //jsonp方法加載chunk function hotDownloadUpdateChunk(chunkId) { var script = document.createElement("script"); script.charset = "utf-8"; script.src = $require$.p + $hotChunkFilename$; if ($crossOriginLoading$) script.crossOrigin = $crossOriginLoading$; document.head.appendChild(script); } // eslint-disable-next-line no-unused-vars function hotDownloadManifest(requestTimeout) { //... }
log-apply-result模塊內容:
/* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ module.exports = function(updatedModules, renewedModules) { //renewedModules表示哪些模塊被更新了,剩余的模塊表示,哪些模塊由于 ignoreDeclined,ignoreUnaccepted配置沒有更新 var unacceptedModules = updatedModules.filter(function(moduleId) { return renewedModules && renewedModules.indexOf(moduleId) < 0; }); var log = require("./log"); //哪些模塊無法HMR,打印log //哪些模塊由于某種原因沒有更新成功。其中沒有更新的原因可能是如下的: // ignoreUnaccepted // ignoreDecline // ignoreErrored if (unacceptedModules.length > 0) { log( "warning", "[HMR] The following modules couldn"t be hot updated: (They would need a full reload!)" ); unacceptedModules.forEach(function(moduleId) { log("warning", "[HMR] - " + moduleId); }); } //沒有模塊更新,表示模塊是最新的 if (!renewedModules || renewedModules.length === 0) { log("info", "[HMR] Nothing hot updated."); } else { log("info", "[HMR] Updated modules:"); //更新的模塊 renewedModules.forEach(function(moduleId) { if (typeof moduleId === "string" && moduleId.indexOf("!") !== -1) { var parts = moduleId.split("!"); log.groupCollapsed("info", "[HMR] - " + parts.pop()); log("info", "[HMR] - " + moduleId); log.groupEnd("info"); } else { log("info", "[HMR] - " + moduleId); } }); //每一個moduleId都是數字那么建議使用NamedModulesPlugin var numberIds = renewedModules.every(function(moduleId) { return typeof moduleId === "number"; }); if (numberIds) log( "info", "[HMR] Consider using the NamedModulesPlugin for module names." ); } };3. webpack-dev-server源碼解讀
webpack構建過程觸發module更新的時機
webpack-dev-server客戶端源碼的關鍵部分
... ... const onSocketMsg = { ... ok() { sendMsg("Ok"); if (useWarningOverlay || useErrorOverlay) overlay.clear(); if (initial) return (initial = false); // eslint-disable-line no-return-assign reloadApp(); }, warnings(warnings) { log.warn("[WDS] Warnings while compiling."); const strippedWarnings = warnings.map((warning) => stripAnsi(warning)); sendMsg("Warnings", strippedWarnings); for (let i = 0; i < strippedWarnings.length; i++) { log.warn(strippedWarnings[i]); } if (useWarningOverlay) overlay.showMessage(warnings); if (initial) return (initial = false); // eslint-disable-line no-return-assign reloadApp(); }, ... }; ... function reloadApp() { if (isUnloading || !hotReload) { return; } if (hot) { log.info("[WDS] App hot update..."); // eslint-disable-next-line global-require const hotEmitter = require("webpack/hot/emitter"); hotEmitter.emit("webpackHotUpdate", currentHash); //重新啟動webpack/hot/emitter,同時設置當前hash if (typeof self !== "undefined" && self.window) { // broadcast update to window self.postMessage(`webpackHotUpdate${currentHash}`, "*"); } } else { //如果不是Hotupdate那么我們直接reload我們的window就可以了 let rootWindow = self; // use parent window for reload (in case we"re in an iframe with no valid src) const intervalId = self.setInterval(() => { if (rootWindow.location.protocol !== "about:") { // reload immediately if protocol is valid applyReload(rootWindow, intervalId); } else { rootWindow = rootWindow.parent; if (rootWindow.parent === rootWindow) { // if parent equals current window we"ve reached the root which would continue forever, so trigger a reload anyways applyReload(rootWindow, intervalId); } } }); } function applyReload(rootWindow, intervalId) { clearInterval(intervalId); log.info("[WDS] App updated. Reloading..."); rootWindow.location.reload(); }
根據以上代碼 可以看出:當客戶端接收到服務器端發送的ok和warning信息的時候,同時支持HMR的情況下就會要求檢查更新,同時還收到服務器端本次編譯的hash值。我們再看一下服務端是在什么時機發送’ok’和’warning’消息。
webpack-dev-server服務端源碼的關鍵部分
class Server { ... _sendStats(sockets, stats, force) { if ( !force && stats && (!stats.errors || stats.errors.length === 0) && stats.assets && //每一個asset都是沒有emitted屬性,表示沒有發生變化。如果發生變化那么這個assets肯定有emitted屬性 stats.assets.every((asset) => !asset.emitted) ) { return this.sockWrite(sockets, "still-ok"); } //設置hash this.sockWrite(sockets, "hash", stats.hash); if (stats.errors.length > 0) { this.sockWrite(sockets, "errors", stats.errors); } else if (stats.warnings.length > 0) { this.sockWrite(sockets, "warnings", stats.warnings); } else { this.sockWrite(sockets, "ok"); } } ... }
上面的代碼是發送‘ok’和‘warning’消息的方法,那具體在什么時機調用此方法呢?
class Server { constructor(compiler, options = {}, _log) { ... const addHooks = (compiler) => { const { compile, invalid, done } = compiler.hooks; compile.tap("webpack-dev-server", invalidPlugin); invalid.tap("webpack-dev-server", invalidPlugin); done.tap("webpack-dev-server", (stats) => { this._sendStats(this.sockets, stats.toJson(STATS)); this._stats = stats; }); }; if (compiler.compilers) { compiler.compilers.forEach(addHooks); } else { addHooks(compiler); } ... } ... }
再看這部分代碼,就可以理解了,每次在compiler的’done’鉤子函數(生命周期)被調用的時候就會通過socket向客戶端發送消息,要求客戶端去檢查模塊更新完成HMR工作。
總結:最近正處于換工作階段,有些閑暇時間,正好拔草,之前工作的過程就很想看一下webpack-dev-server 的實現原理,趁此機會粗略學習了一下它的源碼,有什么不對的地方還望指教,互相學習,加深理解。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102738.html
摘要:在過程中會利用簡稱中的兩個方法和。是通過請求最新的模塊代碼,然后將代碼返回給,會根據返回的新模塊代碼做進一步處理,可能是刷新頁面,也可能是對模塊進行熱更新。該方法返回的就是最新值對應的代碼塊。 Hot Module Replacement(簡稱 HMR) 包含以下內容: 熱更新圖 熱更新步驟講解 showImg(https://segmentfault.com/img/remote...
摘要:原文首次發表在的用法前言如果你有單獨的后端開發服務器,并且希望在同域名下發送請求,那么代理某些會很有用。可以基于一個函數的返回值繞過代理。要為傳出連接綁定的本地接口字符串,默認值將主機標頭的原點更改為目標參考官方文檔 原文首次發表在: Webpack-dev-server的proxy用法 前言 如果你有單獨的后端開發服務器 API,并且希望在同域名下發送 API 請求 ,那么代理某...
摘要:馬上要出了,完全手寫一個優化后的腳手架是不可或缺的技能。每個依賴項隨即被處理,最后輸出到稱之為的文件中,我們將在下一章節詳細討論這個過程。的事件流機制保證了插件的有序性,使得整個系統擴展性很好。 webpack馬上要出5了,完全手寫一個優化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫,親自試驗過可...
摘要:馬上要出了,完全手寫一個優化后的腳手架是不可或缺的技能。每個依賴項隨即被處理,最后輸出到稱之為的文件中,我們將在下一章節詳細討論這個過程。的事件流機制保證了插件的有序性,使得整個系統擴展性很好。 webpack馬上要出5了,完全手寫一個優化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫,親自試驗過可...
閱讀 2703·2021-11-25 09:43
閱讀 2085·2021-11-24 09:39
閱讀 1954·2021-11-17 09:33
閱讀 2750·2021-09-27 14:11
閱讀 1840·2019-08-30 15:54
閱讀 3224·2019-08-26 18:27
閱讀 1264·2019-08-23 18:00
閱讀 1810·2019-08-23 17:53