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的原創文章，請關注公衆號"汪子熙":