一文大白話講清楚webpack進階——5——dev-server原理及其作用

1. webpack的作用

• webpack的作用我們之前見過了，不懂的可以看起系列文章
• 一文大白話講清楚webpack基本使用——1——完成webpack的初步構建一直到一文大白話講清楚webpack基本使用——18——HappyPack
• 一言概之，webpack就是把我們項目中的各個模塊（js Module，css等都視為模塊）進行打包
• 那具體怎么打包的呢
• 通過AST

2. dev-server的作用

• 開開發階段，我們想要預覽頁面效果，就需要啟動一個一個服務器伺服編譯出來的靜態資源，幫助我們實現自動打包，自動刷新等，提高開發效率，webpack-dev-server就是干這個的活

3. dev-server的原理

• webpack-dev-server基于express框架構建了一個HTTP服務，通過webpack-dev-middleware和memory-fs模塊將打包資源輸出到內存中去，當瀏覽器請求文件吃，webpack-dec-server會監視這些請求，并將他們路由到內存中的虛擬文件系統中對應的文件，這樣就可以直接從內存中提供文件，而不需要訪問實際的物理文件。

3.1 啥是webpack-dev-middleware

• webpack-dev-middleware是一個wrapper，理解為容器，他會將webpack編譯后的文件存儲到內存中去，然后用戶在訪問express服務器時，將內存中對應的資源輸出返回。
• 可以把它看成是一個內存型的文件系統，目錄與內存中的產物會形成映射關系
• 當我們訪問express時，express會將請求轉發給webpack-dev-middleware，webpack-dev-middleware會根據映射關系，找到對應的文件，再講文件內容返回給express

3.2 HMR

• 為我們提供無須刷新就可以實施看到頁面效果的動態服務，本質是websocket通信
• 看我這篇文章
• 一文大白話講清楚webpack基本使用——6——熱更新及其原理