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

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

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

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

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

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

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

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

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

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

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

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

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

謎團就這樣解開了。

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