[[441651]]

寫在前面

在上一文中介紹了《如何使用DevServer提高你的本地開發(fā)效率》，在配置好DevServer可以讓我們更加專注業(yè)務編碼，可以實現(xiàn)代碼更新來讓頁面樣式重新渲染。但是當我們使用DevServer去自動刷新時，例如在進行編輯器開發(fā)修改了文本樣式，會刷新頁面編輯器文本丟失，不能實時顯示樣式。當然我們也有對應的解決方法，例如：

• 可以回到代碼中寫死文本內(nèi)容到編輯器中，這樣即使頁面刷新，也不會丟失內(nèi)容
• 通過代碼將編輯器中的內(nèi)容及時保存到localStorage中，刷新后再重新獲取 但是，這些方法存在不足，只是有漏補漏的措施，并沒有根本解決問題，并不適合代碼的維護。這時候webpack就提供了模塊熱替換HMR來解決我們的問題。

模塊熱替換HMR

HMR全稱 Hot Module Replacement，即為"模塊熱替換"或"模塊熱更新"。在計算機領域有個"熱插拔"的概念，指的是在正在運行的計算機設備上插拔設備，并不會影響計算機的正常運行，插上去的設備能夠立刻工作。這里的"熱"指的是在運行過程中的即時變化。

HMR已經(jīng)集成在webpack模塊中，所以不需要再單獨安裝模塊，在運行webpack-dev-server命令時，通過--hot參數(shù)去開啟這個特性，或者也可以在配置文件中通過添加對應的配置來開啟這個功能，這里需要配置兩個地方：

• 需要將devServer對象中的hot屬性設置為true
• 需要載入一個插件，這個插件是webpack內(nèi)置的一個插件，所以先導入webpack模塊，有了模塊后就可以使用一個叫做HotModuleReplacementPlugin插件。

const webpack = require("webpack") 
module.exports ={ 
  devServer:{ 
    // 開啟HMR特性，如果資源不支持HMR會fallback到live reloading 
    hot: true 
    // 只使用HMR，不會fallback到live reloading 
    // hotOnly:true 
  }, 
  plugins:[ 
    // HMR特性所需要的插件 
    new webpack.HotModuleReplacementPlugin() 
  ] 
} 

至于為什么我們開啟HMR過后，樣式文件的修改就可以直接熱更新呢，而且我們并沒有手動處理樣式模塊的更新?這是因為樣式文件是經(jīng)過Loader處理的，在style-loader中就已經(jīng)自動處理了樣式文件的熱更新，所以就不需要我們額外手動去處理。

那么什么樣式可以自動更新處理呢，然而我們的腳本文件卻需要自己手動處理?這是因為樣式模塊更新后，只需要將更新后的css及時替換到頁面中，這樣就可以覆蓋掉之前的樣式，從而實現(xiàn)更新。

然而我們在使用vue-cli或者create-react-app框架腳手架工具時，可能沒有進行手動處理，js代碼照樣可以實現(xiàn)熱替換。這是因為我們在使用框架的時候，項目中的每個文件都是有規(guī)律可循的，比如：react中要求每個模塊導出的必須是個函數(shù)或者類，那么這樣就可以有通用的替換方法，所以這些工具內(nèi)部都已經(jīng)實現(xiàn)了通用的替換操作，就不再需要我們手動處理了。

參考文章

《webpack原理與實踐》

《webpack中文文檔》

寫在最后

其實在我們自己在項目中配置HMR時，需要寫一些額外的代碼會覺得比較麻煩，但是還是需要我們了解其深層的原理。關于前端框架vue、react都是集成式框架，都是開箱即用，已經(jīng)繼承了HMR相關的配置。