在前端开发中，我们经常会使用 Webpack 来打包我们的代码。在打包后的代码中，同样也需要调试。但是由于代码经过了 Webpack 的处理，导致我们无法准确的定位错误。这时候，sourceMap 就派上用场了。
什么是 SourceMap？
sourceMap 是一种映射关系，通过映射关系可以将编译后的代码转化成源代码中的绝对位置，从而可以在浏览器控制台中准确的定位出错的位置。
设置 SourceMap
在 Webpack 中设置 sourceMap 非常简单，只需要在 webpack.config.js 配置文件中进行设置。
我们可以给 devtool 属性传入不同的值来表示不同的 sourceMap 类型。
比如：
module.exports = {
devtool: 'source-map', // 生成 SourceMap
// 其他配置
}在这个例子中，我们使用了 source-map 这个值。这个值表示我们希望生成一个单独的 sourceMap 文件。
我们还有其他的选项可以设置，比如：
- eval ：生成的 SourceMap 的格式为 eval 代码。这个选项可以提高打包时的性能，但是如果出现错误时，只能显示行数，不能显示列数。
- cheap-eval-source-map：生成的 SourceMap 的格式为 eval 代码，生成的映射关系只显示行数，不显示列数，同时也会增加打包时的性能。
为了不影响性能，我们不建议使用 cheap 模式的 sourceMap。
一般来说，我们使用 source-map 模式就可以了。这样既不会影响性能，也可以准确的定位错误。
示例代码
我们在配置文件中进行如下设置：
module.exports = {
devtool: 'source-map',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}然后，在打包后的文件中，我们可以看到生成了一个名为 bundle.js.map 的 SourceMap 文件。这个文件中包含了我们转换后的代码和源代码之间的映射关系。
在 Chrome 浏览器的控制台中，我们可以看到如下信息：
通过使用 sourceMap，我们可以轻松的定位出错信息，从而快速修复错误。同时，我们也能够更好的阅读我们编写的代码。
总结
在开发过程中，使用 sourceMap 可以帮助我们更快速的调试，定位错误。在 Webpack 中，设置 sourceMap 非常简单，只需要在配置文件中设置一下就可以了。建议使用 source-map 模式来生成 sourceMap 文件。
希望这篇文章对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5c756f6b2d6eab313f223