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
謎團就這樣解開了。
要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":
要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":