webpack 模塊熱替換的理解和使用

模塊熱替換(webpack文檔上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允許在運行時更新各種模塊，而無需進行完全刷新。

這句話其實很全面的webpack熱加載的作用，但是如果沒有實際操作過的話，你可能很難理解它在實際運用上的意義。在這里用一些白話去翻譯一下，以便以理解。

模塊 其實就是我們寫的css js以及各種資源文件，圖片，音頻在webpack中都可以視作模塊。

熱更新 在我們每次改變代碼，或者資源文件的時候，整個頁面其實都會刷新。而使用熱更新之后，會直接替換掉，也僅僅替換更改后的依賴模塊，而不用刷新整個頁面，你可以簡單理解成局部更新。具體實現原理在這里就不多講，想了解的同學可以去https://www.webpackjs.com/concepts/hot-module-replacement/ 模塊熱替換去了解。

 

 

好了，對模塊熱更新有個大致的了解，接下來上代碼

webpack.config.js

為了清新的表現使用了哪些插件和配置 我去掉了多余的配置字段，在實際應用中還是需要設置的

const webpack = require("webpack");//引入webpack 
module.exports = {
    devServer: {
        hot: true,//在服務中開啟模塊熱替換
    },
    plugins: [new webpack.NamedChunksPlugin(),// 使用了webpack 內置插件 無需再次下載 NamedModulesPlugin，以便更容易查看要修補(patch)的依賴
        new webpack.HotModuleReplacementPlugin()//使用webpack的內置插件 HotModuleReplacementPlugin 模塊熱替換插件

    ]
}

好了重啟代碼，就可以直接訪問了。如果上訴有什么錯誤的地方歡迎大神指出