使用webpack可幫助我們的開(kāi)發(fā)以及打包络断，在開(kāi)發(fā)過(guò)程中，有時(shí)候我們只修改了部分代碼并想不必刷新整個(gè)頁(yè)面即可看到更改后的效果粘衬，這時(shí)候 webpack-dev-server （WDS）熱更新就可以派上用場(chǎng)了荞估。
關(guān)于 WDS 熱更新咳促，有以下幾點(diǎn)：
（1）WDS 不刷新整個(gè)頁(yè)面；
（2）WDS 不輸出文件勘伺，而放在內(nèi)存中（沒(méi)有磁盤(pán)IO跪腹，速度更快）；
（3）使用 HotModuleReplacementPlugin 插件(webpack自帶)飞醉。
WDS需要先通過(guò) npm 安裝 webpack-dev-server冲茸，然后相關(guān)配置如下：
const devServer = {
port: 8000,
host: '0.0.0.0',
hot: true //熱更新，修改代碼后缅帘，不刷新整個(gè)頁(yè)面
}
// plugin 中需要使 HotModuleReplacementPlugin插件
plugins:defaultPluins.concat([
new webpack.HotModuleReplacementPlugin()
])
熱更新的原理分析：##
HMR Runtime：開(kāi)發(fā)的打包階段被注入到瀏覽器端的 Bundle.js 里轴术，這樣 bundle.js 就建立起和服務(wù)器的連接（websocket連接），這樣在編輯器中修改代碼钦无，相應(yīng)的文件變化就可以得到及時(shí)更新逗栽。
熱更新的過(guò)程，還是看上面那張圖：
（1）啟動(dòng)階段：文件系統(tǒng)中的代碼經(jīng)過(guò) webpack compiler 編譯失暂，打包輸出為 bundle.js祭陷，并傳輸給 Bundle Server，使 瀏覽器能通過(guò)訪(fǎng)問(wèn)服務(wù)器獲取 bundle.js. （圖中過(guò)程為 1趣席，2兵志，A，B）;
（2） 更新階段：改動(dòng)的代碼還是經(jīng)過(guò) webpack compiler 編譯宣肚，然后傳給 HMR Server（知道js代碼中 哪些模塊發(fā)生了改變）想罕，HMR Server 再去通知瀏覽器端的 HMR Runtime 哪些內(nèi)容發(fā)生了變化（以 json 數(shù)據(jù)方式傳輸通知），然后 HMR Runtime 就會(huì)更新代碼霉涨，最后頁(yè)面上就會(huì)呈現(xiàn)相應(yīng)的改變按价。（圖中過(guò)程為 1，2笙瑟，3楼镐，4，5）
最后提下往枷，還可使用 webpack-dev-middleware（WDM）來(lái)進(jìn)行熱更新框产，將 webpack 輸出的文件傳輸給服務(wù)器，適用于靈活的定制場(chǎng)景错洁。
