webpack-dev-server和webpack-dev-middleware的區別

標籤：實現   關係   無重新整理   自己   檔案系統   存在   速度   伺服器   檔案的   

 

webpack-dev-server

webpack-dev-server實際上相當於啟用了一個express的Http伺服器+調用webpack-dev-middleware。它的作用主要是用來伺服資源檔。這個Http伺服器和client使用了websocket通訊協議，原始檔案作出改動後，webpack-dev-server會用webpack即時的編譯，再用webpack-dev-middleware將webpack編譯後檔案會輸出到記憶體中。適合純前端項目，很難編寫後端服務，進行整合。

 

webpack-dev-middleware

 webpack-dev-middleware輸出的檔案存在於記憶體中。你定義了 webpack.config，webpack 就能據此梳理出entry和output模組的關係脈絡，而 webpack-dev-middleware 就在此基礎上形成一個檔案對應系統，每當應用程式請求一個檔案，它匹配到了就把記憶體中緩衝的對應結果以檔案的格式返回給你，反之則進入到下一個中介軟體。

因為是記憶體型檔案系統，所以重建速度非常快，很適合於開發階段用作靜態資源伺服器；因為 webpack 可以把任何一種資源都當作是模組來處理，因此能向用戶端反饋各種格式的資源，所以可以替代HTTP 伺服器。事實上，大多數 webpack 使用者用過的 webpack-dev-server 就是一個 express＋webpack-dev-middleware 的實現。二者的區別僅在於 webpack-dev-server 是封裝好的，除了 webpack.config 和命令列參數之外，很難去做定製型開發。而 webpack-dev-middleware 是中介軟體，可以編寫自己的後端服務然後把它整合進來，相對而言比較靈活自由。

 

webpack-hot-middleware：

是一個結合webpack-dev-middleware使用的middleware，它可以實現瀏覽器的無重新整理更新（hot reload），這也是webpack文檔裡常說的HMR（Hot Module Replacement）。HMR和熱載入的區別是：熱載入是重新整理整個頁面。

 

webpack-dev-server和webpack-dev-middleware的區別