模塊熱替換(Hot Module Replacement)

模塊熱替換功能會在應用程序運行過程中替換、添加或刪除模塊，無需重新加載整個頁面。主要是通過以下幾種方式，來顯著加快開發(fā)速度：

• 保留在完全重新加載頁面時丟失的應用程序狀態(tài)。
• 只更新變更內(nèi)容，以節(jié)省寶貴的開發(fā)時間。
• 調(diào)整樣式更加快速 - 幾乎相當于在瀏覽器調(diào)試器中更改樣式。

webpack-dev-server實現(xiàn)熱更新(HMR)

webpack-dev-server就是一個基于node.js和webpack的小型服務器。

熱更新可以做到在不刷新瀏覽器的前提下更新頁面。

安裝webpack-dev-server

npm install webpack-dev-server --g npm install webpack-dev-serve --save-dev

配置webpack.config.js文件

const webpack=require('webpack');//引入webpackentry:__dirname+'/src/main.js',output:{publicPath:'/dist',//必須加publicPathpath:__dirname+'/dist',filename:'bundle.js'},devServer:{host:'localhost',port:'8080',open:true//自動拉起瀏覽器hot:true,//熱加載//hotOnly:true},plugins:[//熱更新插件new webpack.HotModuleReplacementPlugin()]

但是通過日志發(fā)現(xiàn)頁面先熱更新然后又自動刷新，這和自動刷新是一樣的。
如果只需要觸發(fā)HMR，可以再加個參數(shù)hotOnly:true,這時候只有熱更新，禁用了自動刷新功能。
如果需要自動刷新就不需要設置熱更新。

熱跟新必須有以下5點：
1.引入webpack
2.output里加publicPath
3.devServer中增加hot:true
4.devServer中增加hotOnly:true
5.在plugins中配置 new webpack.HotModuleReplacementPlugin()

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的webpack4.x热更新，自动刷新的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。