webpack-dev-middleware 與 webpack-hot-middlware

dev-middleware:  live reload的實現:

思考一下我們要如何更新(live reload)呢? 當然是須要取得 webpack 編好的資料啊，於是就須要在從 request 到 response 的過程中透過 express 的 middleware 取得資料，而方法就是透過 webpack-dev-middleware 。

比起直接編譯成檔案，webpack-dev-middleware 這個套件還多了一些好處:

• 不須要一直寫入磁碟，全部產生的結果會直接存在記憶體

• 在監視模式(watch mode)下若是檔案發生異動，middleware 會馬上中止提供舊版的 bundle 並且會延遲請求的回應直到編譯完成，如此一來我們就不須要去觀察編譯是否結束了

 

 

 

hot-middlware:

熱替換(Hot Module Replacement/Hot Reloading )  ，實現瀏覽器刷新功能

This module is only concerned with the mechanisms to connect a browser client to a webpack server & receive updates. It will subscribe to changes from the server and execute those changes using webpack's HMR API. Actually making your application capable of using hot reloading to make seamless changes is out of scope, and usually handled by another library.

webpack-hot-middleware 是和webpack-dev-middleware配套使用的。webpack-dev-middleware是一個express中間件，實現的效果兩個，一個是在fs基於內存，提升了編譯讀取速度；第二點是，經過watch文件的變化，動態編譯。可是，這兩點並無實現瀏覽器端的加載，也就是，只是在咱們的命令行能夠看到效果，可是並不能在瀏覽器動態刷新。那麼webpack-hot-middleware就是完成這件小事的。沒錯，這就是一件小事，代碼很少，後面咱們就深刻解讀。

(原理基於 EventStream 輪詢機制，瀏覽器週期性詢問服務器獲取消息)

 

資料1: https://segmentfault.com/a/1190000005614604?_ea=868190

資料2: https://www.jianshu.com/p/bba6bc0a0739