文章介绍了SourceMap在Web开发中的作用，它是用于将编译后的代码映射回源代码的调试工具，特别是在Webpack中。通过配置Webpack的devtool，可以在开发环境使用eval-source-map以快速定位错误，而在生产环境使用nosources-source-map以保护源代码的同时提供错误追踪。文章还列举了不同devtool配置项的适用场景。
一、开发场景介绍
开发中我们不可避免的会写一些bug出来，这时候要调试，快速定位到bug到底出现在哪尤为关键。
例如我故意在sum函数中写一个错误代码如下：
这时我们用前面章节已经写好的开发模式的webpack.dev.js运行，控制台会出现如图提示：
我们点击它报错的文件行数点进去看看
它给出的错误提示的文件是编译后的代码文件，我这里是这个例子比较简单，还是可以一眼看出啦问题在哪，可是实际开发中肯定比这复杂的多，如果想通过编译后的文件定位问题，肯定要废一番功夫。
这时我们迫切需要一个助手帮我们实现从编译后的文件映射到源文件代码出错的位置，这就是SourceMap干的活。
二、什么是SourceMap
Webpack中的sourcemap是一种调试工具，它将编译后的Javascript代码映射回原始源代码，使得开发者在调试时可以方便地追踪代码执行的过程。
当Webpack编译代码时，它会将原始源代码转换为一个或多个目标文件。如果代码中存在错误，开发者需要能够确定错误发生的位置，这时就需要使用sourcemap。
sourcemap是一个包含源代码和目标代码之间映射关系的JSON文件。生成的sourcemap文件可以通过浏览器的开发者工具进行加载，在调试器中可以查看源代码和目标代码的映射关系，以及每个语句的执行过程。
使用sourcemap可以避免在部署时暴露源代码，同时也方便了开发者在调试时快速定位错误
sourcemap有以下使用场景&#x
最低0.47元/天 解锁文章
扫一扫
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
