亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

了解 React Webpack 包

了解 React Webpack 包

臨摹微笑 2023-04-20 10:25:06
所以我有幾個關于 Webpack 如何提供其捆綁包的問題。我有一個使用create-react-app. 當我在 Chrome 開發工具中檢查 JS 包時,我可以看到我在我的 React 應用程序中創建的所有單獨的 js 文件(例如。App.js)。但我也看到其他捆綁包,例如bundle.js,0.chunck.js和main.js. 但是,只有捆綁文件顯示在網絡選項卡中。這表明實際上只下載了 Webpack 包。所以問題是,這些其他單獨的文件是如何傳送到瀏覽器的?我的應用程序使用的是捆綁包還是這些單獨的文件?我相信單個 JS 文件僅在 Webpack 的“開發”模式下可用,而在“生產”模式下不可用,但我仍然想了解這一點。此外,React 源代碼是這些包的一部分還是 React 全局公開?如果 React 是 bundle 的一部分,那么 React 開發工具如何識別頁面上存在 React,因為所有 Webpack bundle 都與所有其他代碼隔離?
查看完整描述

1 回答

?
不負相思意

TA貢獻1777條經驗 獲得超10個贊

正如您在問題中提到的那樣,出于某種原因,您仍然可以調試捆綁和可能縮小的代碼,就好像它沒有被捆綁和縮小一樣。這是可能的原因被稱為:

來源地圖

源映射是文件,它將捆綁文件中的代碼映射到未捆綁文件中代碼的位置。這些源映射由您的捆綁器(如果啟用)在捆綁您的代碼時生成。它們隨請求代碼一起提供,并由您的瀏覽器使用,因此您可以在瀏覽器開發工具中調試自己的未捆綁代碼。


關于你的第二個問題:React 開發工具將識別 React,如果window.__REACT_DEVTOOLS_GLOBAL_HOOK__已設置。此屬性是一個特殊對象,可以與瀏覽器或獨立應用程序中的開發人員工具后端進行通信。因為這是全局window對象的成員,所以它在任何地方都可以訪問,因此不會綁定到單個包。


查看完整回答
反對 回復 2023-04-20
  • 1 回答
  • 0 關注
  • 115 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號