熱更新是什麼？

簡單來說，熱更新一般是指手機裡的app有小規模更新，以直接打補丁的形式更新。

相對應的，另一種更新方式就是下載新的安裝包，重新安裝。

所以熱更新在手遊裡頭是比較常見的，畢竟遊戲應用個個都幾百兆起步。

那Web前端有熱更新？

按上面那個說法，Web應該是不存在熱更新的。

因為網頁的架構是B/S，即 瀏覽器+伺服器 ， 它不像手機app一樣是 C/S 客戶端+伺服器

所以在網頁這一塊是無法推送補丁讓瀏覽器去更新的。

那為什麼我搜前端熱更新有好多文章在講？

網上大多數前端熱更新講的都是熱載入 hot-loader 或者是模組熱更替 HMR

熱載入是什麼？

盜圖

所以大概流程就如下：

伺服器檢測程式碼是否修改了修改了通知瀏覽器瀏覽器根據修改的檔案情況選擇區域性重新整理或全域性重新整理

具體例項

vue-loaderwebpack-dev-server根據配置可以開啟HMR模組官方文件：doc.webpack-china.org/guides/hot-…個人小demo: gitee.com/gitzt/webpa…

試一下

package.json 配置檔案

"scripts": { "test": "echo \\"Error: no test specified\\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open", "server-hot": "webpack-dev-server --hot"},複製程式碼

webpack.config.js 配置檔案

// 本地開發伺服器 devServer: { // 本地伺服器載入資源所在路徑 contentBase: "./public", // true 表示所有跳轉都是index.html historyApiFallback: true, // 當原始檔修改時，自動重新整理頁面 inline: true, // 埠號，若不設定，預設為8080 port: 3000, },複製程式碼

所以我們在webpack-demo目錄下，執行npm run server就等於運行了webpack-dev-server --open這樣我們就啟用了webpack-dev-server但是我們配置項沒有配置啟用HMR所以當你修改了檔案時，它只是重新打包了，並通知瀏覽器過載一遍頁面。

執行webpack-dev-server

$ npm run server是我執行的命令，根據package.json 配置檔案這個命令等同於webpack-dev-server --open

下面那些輸出語句，一些是webpack-dev-server啟用狀態，還有webpack的打包檔案的打包過程

瀏覽器的頁面效果是這樣的

為什麼輸出的是這個？

實際頁面index.html程式碼

這樣應該很清晰了吧

首先入口檔案main.js引入了hello.js和main.css

然後hello.js又引入了style.css和test.json

所以上面這些與入口檔案有直接聯絡或間接聯絡的檔案都會通過webpack去打包，輸出為一個bundle.js

而index.html是引用了bundle.js檔案的，所以就出現了這個效果。

你好像沒講到webpack-dev-server的作用哦

多了的js檔案其實就是一些樣式的更替

那是不是用了HMR就可以實現任何修改都是區域性重新整理呢？不是的。如果只是修改了CSS樣式，那可以通過JS以打補丁的形式去進行替換樣式。而且也不是說改樣式就都能實現區域性重新整理，如果你改的是style.css這個檔案，它的結果是會重新載入頁面，為什麼呢？因為style.css這裡頭用到了CSS模組的東西，所以沒辦法說直接打個補丁就能搞定。

結論

熱載入這個東西，首要就是靠伺服器與瀏覽器之間的通訊，有了通訊才能通知瀏覽器什麼時候去重新整理，而重新整理又分全域性和區域性，這個要看服務端改了哪些程式碼檔案，而這些檔案如果可以區域性重新整理就區域性重新整理，不行的話就只能重新載入頁面了。