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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- help:about access http://localhost:8080/HTTPlocalhost
- help:about jboss access http://localhost:8080/HTTPlocalhost
- JHipster專案啟動後預設的8080主頁是空白頁面?
- 隱藏alert彈框中的localhost:8080(ip地址跟埠號)localhost
- CentOS7中啟動Tomcat後,8080埠不能被外部訪問的解決辦法。CentOSTomcat
- 重簽名後的 wda 正常啟動了,但是沒有返回 sessionIDSession
- http-server快速啟動localhost與iPhone X相容HTTPServerlocalhostiPhone
- 帝國cms返回首頁帶.index.html的解決辦法IndexHTML
- java本地連線遠端Hbase可是返回zookeeper的地址是localhostJavalocalhost
- 啟動報錯:Access denied for user 'root'@'localhost' (using password:YES)localhost
- MySQL 啟動原理剖析MySql
- SpringBoot 啟動類的原理Spring Boot
- 解決不能ip:8080開啟專案
- SpringBoot 啟動原理Spring Boot
- SpringBoot啟動原理Spring Boot
- 執行緒啟動原理執行緒
- 使用谷歌雲服務開啟8080等其他的埠谷歌
- MySQL讀取配置檔案的順序、啟動方式、啟動原理MySql
- sublime text3直接開啟localhost的檔案localhost
- linux下修改防火牆,開啟8080埠Linux防火牆
- jboss裡部署web application,如何史 http://localhost:8080/test 指向實際的testaaa目錄,在哪個檔案WebAPPHTTPlocalhost
- Activity側滑返回的實現原理
- 【爬坑日記】npm build之後,開啟dist資料夾下index.html為空白頁NPMUIIndexHTML
- springBoot-啟動原理Spring Boot
- 程式啟動原理和UIApplicationUIAPP
- PostgreSQL vacuum原理—啟動機制SQL
- Spring容器系列-啟動原理Spring
- ABAP Development Tool前後臺互動的原理dev
- Webpack-dev-server結合後端伺服器的熱替換配置WebdevServer後端伺服器
- Several ports (8005, 8080) required by Tomcatv9.0 Server at localhost are already in use.Tomcat解決方案UITomcatServerlocalhost
- 關於Tomcat啟動報錯:Failed to initialize end point associated with ProtocolHandler ["http-apr-8080"]TomcatAIProtocolHTTP
- TensorBoard啟動後No dashboards ...的問題ORB
- 重灌WIN後的Linux啟動(轉)Linux
- 移動端圖片開啟及返回客戶端客戶端
- win10快速啟動有什麼作用_win10快速啟動的原理Win10
- webpack-dev-server版本WebdevServer
- nacos原理三-註冊中心原理&原始碼啟動.md原始碼
- iOS常見檔案及程式的啟動原理iOS