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和熱載入的區別是:熱載入是重新整理整個頁面。