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

總結

以上是生活随笔為你收集整理的webpack-dev-server启动后，localhost:8080返回index.html的原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。