webpack将js打包后的map文件详解

一、简介

当我们使用webpack将JavaScript代码打包合并成单个文件时，webpack会自动生成一个source map文件。这个文件的作用是将打包后的文件中的代码映射回未打包前的原始代码，方便我们调试和定位错误。本文将详细讲解webpack生成的source map文件的格式和使用方法。

二、source map文件格式

Webpack生成的source map文件与JS文件同名，只是在文件名后面加上了.map扩展名。它是一个JSON格式的文件，包含以下内容：

• version - source map版本号，当前为3
• file - 原始JS文件名
• sources - 源代码文件名数组
• sourcesContent - 源代码文件内容数组
• mappings - 映射信息

其中最重要的是mappings字段，它表示打包后的代码和原始代码之间的映射关系。它由一系列逗号分隔的段落组成。每个段落表示一行打包后的代码与原始代码之间的映射关系。每个段落又由分号分隔开，表示该行代码中的不同部分之间的映射关系。例如，下面是一个简单的映射关系：

AAAAA,BCDEA;AAAAF,BCDFA;AAAAG,BCDGA;

其中，每个大写字母代表一个字符在打包后的代码中的位置，对应的小写字母代表该字符在原始代码中的位置。逗号表示同一行内的不同字符之间的映射关系，分号表示下一行的映射关系。

三、如何使用source map文件

当我们在开发过程中遇到一些问题时（如代码无法正常运行、控制台输出报错信息等），我们需要借助source map文件来进行调试。以下是两个使用source map文件的示例。

1. 在浏览器中调试

我们可以使用浏览器的开发者工具来调试JS代码和source map文件。以下是Chrome浏览器中的操作步骤：

（1）在开发者工具的Sources选项卡中，找到对应的JS文件。

（2）在该JS文件中断点（点击行数前面的小三角标志），或直接在代码中使用debugger语句添加断点。

（3）在浏览器中操作，当执行到断点时，会自动跳转到开发者工具中对应的代码行，此时就可以进行调试了。如果source map文件无法被找到，浏览器将无法正确定位到原始代码中的行。

1. 在Node.js中调试

我们可以使用Node.js提供的工具来调试JS代码和source map文件。以下是使用Node.js调试工具进行调试的步骤：

（1）在webpack配置中指定生成source map文件：

module.exports = {
  devtool: 'source-map',
}

（2）在Node.js中调试时，添加--inspect-brk参数：

node --inspect-brk bundle.js

（3）在Chrome浏览器中访问chrome://inspect/#devices，可以看到当前正在运行的进程列表。点击对应进程旁边的「inspect」按钮，即可打开开发者工具，进行调试。

四、总结

本文讲解了webpack生成的source map文件的格式和使用方法。在开发过程中，使用source map文件可以方便我们进行调试和定位错误。如果你遇到了开发调试的问题，建议先检查是否正确生成了source map文件。