当捆绑器将 JS 文件合并为一个时，JS 文件如何在开发工具的浏览器中可用。我读到，webpack 使用捆绑器将所有导入的文件合并为一个，在浏览器中以 bundle.js 的形式出现，但当我们在浏览器中调试它们时，我们仍然可以使用 JS 文件。我的问题是浏览器在使用bundle.js时如何为我们提供调试功能
我尝试https://legacy.reactjs.org/docs/code-splitting.html来理解事物，但还不够深入
大多数捆绑器不仅从许多源文件生成JavaScript代码包，它们通常还生成称为源映射的附加文件。这些源映射与捆绑文件一起存在，并向网络浏览器等软件提供有关捆绑文件如何与用于生成它们的源文件相关的说明。
通过使用这些源映射，您的 Web 浏览器能够在其开发工具中向您显示源文件，即使页面上运行的实际文件可能是一个包。这些源映射还允许您与这些包进行交互，就像与源文件进行交互一样，例如通过添加断点进行调试。
通常，捆绑器会提供一系列选项来生成不同类型的源映射，这些映射具有不同的优点和缺点，并且自动构建系统通常使用不同的规则在不同的环境中生成源映射。
例如，某些类型的源映射生成速度很快，但文件非常大。这使得它们适合本地开发，其中源文件在开发时经常更改，但对于部署到生产环境不太有用。并非每个项目都会将任何源映射部署到生产中。
您在问题中提到了 Webpack。以下是有关 Webpack 如何让您通过其
devtool