webpack熱更新

為什么要熱更新

每次改完代碼都需要重新打包一次，打開瀏覽器，刷新一次，很麻煩 我們可以安裝使用webpack的devserver來改善這塊的體驗。

怎么使用熱更新

使用webpack內置HotModuleReplacementPlugin插件。按如下代碼安裝配置好，重新啟動服務后，會發現dist目錄沒有了，這是因為devServer把打包后的模塊不會放在dist目錄下，⽽是放到內存中，從⽽提升速度。
代碼：

module.exports = {
  ...
  devServer: {
    contentBase: "./dist",
    hot: true
  }
}

原理：

webpack-dev-server：

(WDS)的功能提供 bundle server的能力，就是生成的 bundle.js 文件可以通過 localhost://xxx 的方式去訪問，另外 WDS 也提供 livereload(瀏覽器的自動刷新)。

hot-module-replacement-plugin：

HMR Server 是服務端，用來將變化的 js 模塊通過 websocket 的消息通知給瀏覽器端。
HMR Runtime是瀏覽器端，用於接受 HMR Server 傳遞的模塊數據，瀏覽器端可以看到 .hot-update.json 的文件過來。
hot-module-replacement-plugin的作用是提供 HMR 的 runtime，並且將 runtime 注入到 bundle.js 代碼里面去。一旦磁盤里面的文件修改，那么 HMR server 會將有修改的 js module 信息發    送給 HMR runtime，然后 HMR runtime 去局部更新頁面的代碼。因此這種方式可以不用刷新瀏覽器。

總結：

webpack 構建出來的 bundle.js 本身是不具備熱更新的能力的，HotModuleReplacementPlugin 的作用就是將 HMR runtime 注入到 bundle.js，使得bundle.js可以和HMR server建立websocket的通信連接。hot-module-replacement-plugin 包給 webpack-dev-server 提供了熱更新的能力。