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