sourcemap 的 eval 模式不生成外部 .map 文件,而是将 base64 编码的映射信息内联在 eval 代码末尾,并通过 //# sourceurl=... 指定虚拟路径供浏览器 devtools 识别源码位置。

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 未正确注入或路径重复。











