了解 React Webpack 包

Question

所以我有几个关于 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 都与所有其他代码隔离？

Answer 1

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

来源地图

源映射是文件，它将捆绑文件中的代码映射到未捆绑文件中代码的位置。这些源映射由您的捆绑器（如果启用）在捆绑您的代码时生成。它们随请求代码一起提供，并由您的浏览器使用，因此您可以在浏览器开发工具中调试自己的未捆绑代码。

---

关于你的第二个问题：React 开发工具将识别 React，如果window.__REACT_DEVTOOLS_GLOBAL_HOOK__已设置。此属性是一个特殊对象，可以与浏览器或独立应用程序中的开发人员工具后端进行通信。因为这是全局window对象的成员，所以它在任何地方都可以访问，因此不会绑定到单个包。