webpack的HMR功能，是通過websocket實現的推送JSON Patch，同時需要第三方支持的庫。
具體的解決方案：
熱加載（HMR）是webpack dev server最強大的功能之一，頁面源碼更改無需刷新就能實時推送到頁面。以vue為例，最簡單的HMR配置策略如下：
首先是下載webpack-dev-server與前端的js庫的HMR依賴： npm i webpack-dev-server
之后編輯package.json中的命令，在script中配置dev-server：
添加了這一行代碼后，運行 npm run dev-server即可實現HMR功能的dev-server引入。這也相當於在沒有修改業務代碼的情況下，完成了HMR的引入。但是如果需對webpack-dev-server進行配置，可以編輯webpack.config.js中的module. devServer的相關字段。
雖然HMR非常使用，但與webpack-dev-server的集成也一定程度上影響了其泛用性。在一些場景下，我們仍然需要在開發時使用webpack寫入到磁盤的bundle文件，這時候就無法使用的dev-server配套的HMR。這就給我們引出一個問題，如何在配置中實現既支持HMR，又支持--watch的傳統開發模式呢？
通過npm scripts，可以很容易的區分帶HMR和不帶HMR的構建命令，如下所示：
會區分兩條構建開發包的命令，區別在於通過wepack的命令會將打包文件動態寫入磁盤，而webpack-dev-server的命令可以在使用webpack配置文件的基礎上，無縫引入HMR特性。這樣，可以在開發環境不適合使用HMR的場合中也可以通過npm run dev命令實現回退。