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