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


 

webpack-dev-server

webpack-dev-server實際上相當於啟用了一個expressHttp服務器+調用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和熱加載的區別是:熱加載是刷新整個頁面。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM