<p>SourceMap 的 eval 模式不生成外部 .map 文件，而是将 base64 编码的映射信息内联在 eval 代码末尾，并通过 //# sourceURL=... 指定虚拟路径供浏览器 DevTools 识别源码位置。</p>
SourceMap 的 eval 模式本身不生成外部 .map 文件，而是将映射信息以 base64 编码形式内联在 eval() 执行的代码末尾，并通过 sourceURL（或旧版 //@ sourceURL=...）为每段动态执行的代码指定一个虚拟路径。这个“伪路径”不是真实文件，但能让浏览器开发者工具识别并显示对应源码位置。
sourceURL 是如何工作的
sourceURL 是一个被浏览器（Chrome、Firefox、Safari）广泛支持的调试约定，写在 eval 字符串末尾（或 Function 构造器字符串中），格式为：
它不会影响代码执行，仅用于 DevTools 显示——浏览器会把这个字符串当作该段 eval 代码的“文件名”，并据此关联 SourceMap 中的源码位置。Webpack 默认在 eval 模式下自动注入此标签，路径通常来自模块的原始路径（经 webpack:// 协议前缀修饰）。
让每段代码有独立伪路径的关键：确保模块路径唯一且可追溯
Webpack 的 eval 类模式（如 eval、eval-source-map）默认已为每个模块生成带 sourceURL 的包裹代码。要保证“每一段代码”有独立伪路径，需满足：
- 每个模块（.js/.ts 文件）必须有唯一、稳定的逻辑路径，不能被 loader 合并或重写（例如避免用
babel-loader的compact: true破坏路径标识） - 禁用影响 sourceURL 生成的插件或配置，比如自定义
devtoolModuleFilenameTemplate时不要返回空或重复值 - 若使用动态 import 或 code-splitting，确保 chunk 名称不冲突，否则不同 chunk 的模块可能共用同一 sourceURL 前缀
手动控制 sourceURL 内容（进阶）
可通过 Webpack 的 devtoolModuleFilenameTemplate 配置定制 sourceURL 的生成逻辑，例如：
也可以加入哈希或上下文信息增强唯一性：
devtoolModuleFilenameTemplate: ({ identifier }) => `webpack://${identifier.replace(/[:\/s]/g, '_')}`注意：修改后需确保路径不含非法字符（如空格、换行），且长度适中，否则某些调试器可能截断或忽略。
验证是否生效
打开 Chrome DevTools → Sources 面板 → 左侧文件树中展开 webpack:// 节点，应能看到按原始目录结构组织的伪文件；点击任一文件，右侧编辑器应显示源码而非打包后代码；断点也应准确命中原始行号。若只看到 VMxxx 且无结构，则 sourceURL 未正确注入或路径重复。
