模塊熱替換(Hot Module Replacement)

HMR是webpack最令人興奮的特性之一，當(dāng)你對(duì)代碼進(jìn)行修改并保存后，webpack 將對(duì)代碼重新打包，并將新的模塊發(fā)送到瀏覽器端，瀏覽器通過(guò)新的模塊替換老的模塊，這樣在不刷新瀏覽器的前提下就能夠?qū)?yīng)用進(jìn)行更新。HMR是一個(gè)非常值得去深入研究的東西，它絕不是目前我們看到的大多數(shù)技術(shù)文章說(shuō)的配置一個(gè)hot參數(shù)這么簡(jiǎn)單，有興趣的小伙伴可以去看看它的實(shí)現(xiàn)原理，目前為止我也只看過(guò)一點(diǎn)點(diǎn)。

其實(shí)實(shí)現(xiàn)HMR的插件有很多，webpack-dev-server只是其中的一個(gè)，當(dāng)然也是優(yōu)秀的一個(gè)，它能很好的與webpack配合。另外，webpack-dev-server只是用于開(kāi)發(fā)環(huán)境的。

webpack-dev-server是一個(gè)小型的靜態(tài)文件服務(wù)器，為webpack打包的資源文件提供Web服務(wù)。并且提供自動(dòng)刷新和Hot Module Replacement（模塊熱替換：前端代碼變動(dòng)后無(wú)需刷新整個(gè)頁(yè)面，只把變化的部分替換掉）。

（1）安裝

npm install webpack-dev-server --save-dev

（2）配置

修改webpack.config.js，添加devServer的配置

  devServer: {    contentBase: './dist',    port: 3000, // 默認(rèn)8080    host:'localhost',    inline: true // 實(shí)時(shí)刷新  },

webpack-dev-server支持兩種自動(dòng)刷新方式：

1. Iframe mode
2. Inline mode

修改package.json,添加script腳本start： " start " : " webpack-dev-server --open "

此時(shí)，在命令行輸入 npm start ，則瀏覽器自動(dòng)打開(kāi)頁(yè)面。

修改頁(yè)面內(nèi)容并保存，頁(yè)面實(shí)現(xiàn)實(shí)時(shí)刷新。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。