webpack-dev-server啟動後,localhost:8080返回index.html的原理

i042416發表於2018-10-21

webpack-dev-server是一個採用Node.js Express實現的微型伺服器, 內部使用webpack-dev-middleware來響應傳送到伺服器監聽單口的HTTP請求。

webpack-dev-server主要用於前端專案的本地開發和除錯。

具體使用,只需要在package.json的devDependencies裡新增它的依賴即可。

webpack-dev-server啟動後,localhost:8080返回index.html的原理

同樣在package.json裡定義dev script,執行該webpack-dev-server, 這樣用命令列npm run dev就可啟動webpack-dev-server.

webpack-dev-server啟動後,localhost:8080返回index.html的原理

其原理是,npm install後,webpack-dev-server.js就會自動出現在當前專案資料夾的node_modules目錄裡:

webpack-dev-server啟動後,localhost:8080返回index.html的原理

Webpack-dev-server.js的伺服器例項透過關鍵字new建立出來:

webpack-dev-server啟動後,localhost:8080返回index.html的原理

在Server.js的內部實現裡,第76行我們就能觀察到該伺服器採用nodejs的express模組實現。

Express例項建立後,透過第78行app.all('*', ... )掛接處理函式,這個箭頭函式(req,res,next) => { 負責處理所有發往這個伺服器的HTTP請求。

webpack-dev-server啟動後,localhost:8080返回index.html的原理

第92行就是Server.js裡webpackDevMiddleware的初始化過程。

webpack-dev-server啟動後,localhost:8080返回index.html的原理

現在我們就來看看瀏覽器裡輸入localhost:8080後會發生什麼事情。

webpack-dev-server啟動後,localhost:8080返回index.html的原理

根據前面的描述,瀏覽器發起前往localhost:8080的請求被webpackDevMiddleware服務,見下圖除錯截圖,其中變數req.url為/,這是我們期望看到的,因為localhost:8080後面沒有跟任何路徑。

最終會將執行流投遞到processRequest函式里,第53行程式碼說明,如果HTTP請求路徑/後沒有子路徑,則預設返回一個硬編碼的index.html

webpack-dev-server啟動後,localhost:8080返回index.html的原理

謎團就這樣解開了。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2217005/,如需轉載,請註明出處,否則將追究法律責任。

相關文章