了解React Webpack包

Question

因此，我有几个关于Webpack如何提供捆绑服务的问题。我使用create React app创建了一个React应用程序。当我在Chrome开发工具中检查JS包时，我可以看到我在React应用程序中创建的所有单独JS文件（例如，app.JS）。但我也看到了其他捆绑包，如bundle.js，0.chunck.js和main.js。但是，“网络”选项卡中仅显示捆绑文件。这表明实际上只下载了Webpack捆绑包。

所以问题是，这些单独的文件是如何被传递到浏览器的？我的应用程序使用的是捆绑包还是这些单独的文件？我相信单个JS文件只在Webpack的“开发”模式下可用，而不是在“生产”模式下可用，但我仍然想了解这一点。

此外，React源代码是这些捆绑包的一部分还是React是全局公开的？如果React是bundle的一部分，那么React开发工具如何识别页面上存在React，因为所有Webpack bundle都与所有其他代码隔离？

Answer 1

正如您在问题中提到的，出于某种原因，您仍然能够调试捆绑的和可能缩小的代码，就像它没有被捆绑和缩小一样。这是可能的原因被称为：

源映射是文件，它将捆绑文件中的代码映射到未捆绑文件中的代码位置。这些源映射由捆绑程序（如果启用）在捆绑代码时生成。它们在请求时随代码一起发送，并由浏览器使用，以便您可以在浏览器开发工具中调试自己的未捆绑代码。有关更多细节，这里有一个很好的源地图介绍。

关于您的第二个问题：如果窗口中设置了.\u React\u DEVTOOLS\u GLOBAL\u HOOK\u，则React开发工具将识别React。此属性是一个特殊对象，用于在浏览器或独立应用程序中与开发人员工具后端进行通信。由于它是全局窗口对象上的成员，因此在任何地方都可以访问它，因此不绑定到单个捆绑包。