问题描述
所以我对Webpack如何提供其捆绑包有一些疑问。我有一个使用create-react-app创建的React应用程序。当我检查Chrome开发工具中的JS捆绑包时，可以看到我在React应用程序中创建的所有单个js文件（例如App.js）。但是我还看到了其他捆绑软件，例如bundle.js，0.chunck.js和main.js。但是，“网络”选项卡中仅显示捆绑文件。这表明实际上只下载了Webpack捆绑软件。
问题是，这些其他单个文件如何传递到浏览器？我的应用程序是使用捆绑软件还是使用这些单独的文件？我相信单个JS文件仅在Webpack的“开发”模式下可用，而在“生产”模式下不可用，但是我仍然想了解这一点。
此外，React源代码是这些捆绑软件的一部分，还是React全局公开？如果React是捆绑包的一部分，那么假定所有Webpack捆绑包都与所有其他代码隔离开来，那么React开发工具如何识别React存在于页面上？
解决方法
正如您在问题中提到的那样，由于某种原因，您仍然可以调试捆绑的和可能缩小的代码，就像未捆绑和缩小一样。可能的原因称为：
源地图
源映射是文件，它们将捆绑文件中的代码映射到非捆绑文件中的代码位置。这些源映射是由捆绑程序（如果启用）在捆绑代码时生成的。它们随请求一起提供了代码，并且供浏览器使用，因此您可以在浏览器开发工具中调试自己的非捆绑代码。有关更多详细信息，请对源映射here进行很好的介绍。
关于第二个问题：如果设置了click()，React开发工具将识别React。此属性是一个特殊对象，支持与浏览器或独立应用程序中的开发人员工具后端进行通信。由于它是全局innerText对象的成员，因此可以在任何地方访问，因此不能绑定到单个包。