打包工具合并JS为bundle.js后，浏览器DevTools如何显示原文件并支持调试？

这核心靠的是Source Maps（源映射），具体流程是这样的：

• Webpack打包时，会生成一份「映射文件」（通常是.map后缀，比如bundle.js.map），或者把映射内容直接内嵌到打包后的bundle里。这份文件里存着打包后代码和原始文件的精确对应关系——比如打包后的某一行代码，对应原始项目里哪个文件的哪一行、哪个变量/函数来自原始代码的哪个位置。
• 打包后的bundle.js末尾会有一行特殊注释，比如//# sourceMappingURL=bundle.js.map，告诉浏览器「这份代码有对应的源映射文件」。
• 浏览器加载bundle.js时，会读取这个注释，自动加载对应的映射文件，然后在开发者工具里把打包后的代码反向映射回你的原始JS文件。这样你调试时看到的就是自己写的原始代码，断点、查看变量都和直接运行原始文件没区别。

在Webpack里，你可以通过devtool配置项控制源映射的生成方式：

• 开发环境常用eval-cheap-module-source-map，生成速度快，还能保留原始文件的结构和行号；
• 生产环境如果需要调试，可以用source-map，生成独立的map文件（不会影响生产代码体积，因为浏览器只会在打开调试工具时加载它）。

另外，代码分割场景的原理也是一样的——每个分割出来的chunk都会对应自己的源映射文件，浏览器照样能把每个chunk映射回对应的原始模块。

内容的提问来源于stack exchange，提问作者Rohan Bisht