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