So I have a few questions regarding how Webpack serves its bundles. I have a React application created using create-react-app. When I inspect the JS bundles in Chrome dev tools, I can see all the individual js files I created in my React app (eg. App.js). But I also see other bundles like bundle.js, 0.chunck.js and main.js. However, only the bundle files are shown in network tab. This indicates that only the Webpack bundles were actually downloaded.
So the question is, how were these other individual files get delivered to the browser? Is my application using the bundle or these separate files? I believe that the individual JS files are only available in 'development' mode of Webpack, and not in 'production' mode, but I would still like to understand this.
Further, is the React source code a part of these bundles or is React globally exposed? If React is part of the bundles, then how does React dev tools recognize that React is present on the page, given that all Webpack bundles are isolated from all other code?
As you mentioned in your question, for some reason you are still able to debug your bundled and probably minified code as if it has not been bundled and minified. The reason this is possible is called:
Source maps
Source maps are files, which map code in the bundled file to the locations of the code in unbundled files. Those source maps are generated by your bundler (if enabled) while bundling your code. They are shipped with the code on requesting it and are used by your browser, so that you can debug your own unbundled code in the browser dev tools. For more details, there is a good introduction into source maps here.
Regarding your second question: React dev tools will recognize React, if
window.__REACT_DEVTOOLS_GLOBAL_HOOK__is set. This property is a special object enabling communication with the developer tools backend in the browser or standalone app. As this is a member on the globalwindowobject, it is accessible everywhere and therefore not bound to a single bundle.