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

webpack-dev-server是一個采用Node.js Express實現(xiàn)的微型服務器, 內(nèi)部使用webpack-dev-middleware來響應發(fā)送到服務器監(jiān)聽單口的HTTP請求。

webpack-dev-server主要用于前端項目的本地開發(fā)和調(diào)試。

具體使用，只需要在package.json的devDependencies里添加它的依賴即可。

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

其原理是，npm install后，webpack-dev-server.js就會自動出現(xiàn)在當前項目文件夾的node_modules目錄里：

Webpack-dev-server.js的服務器實例通過關(guān)鍵字new創(chuàng)建出來：

在Server.js的內(nèi)部實現(xiàn)里，第76行我們就能觀察到該服務器采用nodejs的express模塊實現(xiàn)。

Express實例創(chuàng)建后，通過第78行app.all('*', ... )掛接處理函數(shù)，這個箭頭函數(shù)(req,res,next) => { 負責處理所有發(fā)往這個服務器的HTTP請求。

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

現(xiàn)在我們就來看看瀏覽器里輸入localhost:8080后會發(fā)生什么事情。

根據(jù)前面的描述，瀏覽器發(fā)起前往localhost:8080的請求被webpackDevMiddleware服務，見下圖調(diào)試截圖，其中變量req.url為/，這是我們期望看到的，因為localhost:8080后面沒有跟任何路徑。

最終會將執(zhí)行流投遞到processRequest函數(shù)里，第53行代碼說明，如果HTTP請求路徑/后沒有子路徑，則默認返回一個硬編碼的index.html

謎團就這樣解開了。