模塊熱替換(Hot Module Replacement)

模塊熱替換功能會(huì)在應(yīng)用程序運(yùn)行過(guò)程中替換、添加或刪除模塊，無(wú)需重新加載整個(gè)頁(yè)面。主要是通過(guò)以下幾種方式，來(lái)顯著加快開(kāi)發(fā)速度：

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

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

webpack-dev-server就是一個(gè)基于node.js和webpack的小型服務(wù)器。

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

安裝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//自動(dòng)拉起瀏覽器hot:true,//熱加載//hotOnly:true},plugins:[//熱更新插件new webpack.HotModuleReplacementPlugin()]

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

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

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

總結(jié)

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

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