Webpack打包后Chrome控制台显示源文件名的原理及相关API咨询

这个问题本质是Source Map在背后做映射，我来给你详细拆解：

为什么能看到原始源文件？ #

当Webpack把多个源文件打包成单个bundle.js时，只要你配置了Source Map，它就会生成一个额外的.map后缀文件（或者把映射信息内嵌到打包文件里）。这个文件就像一个“翻译字典”，记录了打包后代码的每一行对应原始源码的哪个文件、哪一行哪一列。

Chrome开发者工具会自动检测并加载这个Source Map，所以当你的代码输出日志、抛出错误时，控制台会自动把bundle.js里的代码位置映射回原始的源文件名，甚至还能让你直接在原始源码里断点调试，体验和没打包时几乎一样。

Webpack里怎么配置启用？ #

在你的webpack.config.js里设置devtool选项就行，不同的选项对应不同的Source Map类型，适合不同场景：

• 开发环境首选：devtool: 'eval-cheap-module-source-map' —— 构建速度快，还能保留原始源码的行信息，调试起来很顺手
• 生产环境推荐：devtool: 'source-map' —— 生成独立的Source Map文件，不会增加打包后代码的体积，适合线上排查问题

举个配置例子：

module.exports = {
  // 其他配置（入口、输出、loader这些）...
  devtool: 'eval-cheap-module-source-map', // 开发环境用这个
  // devtool: 'source-map', // 生产环境切换成这个
};

用什么API主动显示源文件名？ #

如果想在代码里主动获取并打印当前的源文件名，可以利用Error对象的stack属性——当Source Map生效时，stack里的调用栈信息会自动映射回原始源文件。

我写个简单的工具函数给你参考：

function showCurrentSourceFile() {
  const err = new Error();
  // Chrome里调用栈的第2行一般是当前函数的调用位置（不同浏览器可能有差异）
  const stackLine = err.stack.split('\n')[2];
  // 匹配括号里的文件路径
  const fileMatch = stackLine.match(/\((.+?):\d+:\d+\)/);
  
  if (fileMatch) {
    // 只提取文件名，去掉前面的路径
    const fileName = fileMatch[1].split('/').pop();
    console.log(`这段代码来自：${fileName}`);
  }
}

把这个函数加到你的示例代码里试试：

• a.js：

import './b.js';

function showCurrentSourceFile() {
  const err = new Error();
  const stackLine = err.stack.split('\n')[2];
  const fileMatch = stackLine.match(/\((.+?):\d+:\d+\)/);
  
  if (fileMatch) {
    const fileName = fileMatch[1].split('/').pop();
    console.log(`这段代码来自：${fileName}`);
  }
}

showCurrentSourceFile();
console.log('hello from a.js');

• b.js：

function showCurrentSourceFile() {
  const err = new Error();
  const stackLine = err.stack.split('\n')[2];
  const fileMatch = stackLine.match(/\((.+?):\d+:\d+\)/);
  
  if (fileMatch) {
    const fileName = fileMatch[1].split('/').pop();
    console.log(`这段代码来自：${fileName}`);
  }
}

showCurrentSourceFile();
console.log('hello from b.js');

运行后Chrome控制台会输出：

这段代码来自：b.js
hello from b.js
这段代码来自：a.js
hello from a.js

另外，直接调用console.trace()也能快速看到完整的调用栈，每一行都会显示对应的原始源文件名，不用自己解析stack，适合快速调试。

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