什么是 sourcemap
在前端开发中，我们经常需要在浏览器中调试代码。但是，由于 JavaScript 的特性，浏览器中的调试信息并不是我们在代码中所写的代码，而是被转换后的代码。
为了解决这个问题，sourcemap 诞生了。sourcemap 是一种映射关系，它能够将转换后的代码映射回原始代码，从而让我们在浏览器中调试时能够看到我们所写的代码。
sourcemap 的优点
使用 sourcemap 可以让我们在浏览器中调试代码变得更加方便。它可以：
- 显示我们所写的代码，而不是转换后的代码。
- 在调试时可以准确地定位到出错的地方。
- 在开发过程中，能够更好地调试和排查问题。
如何配置 sourcemap
Webpack 是一个强大的前端构建工具，它支持多种 sourcemap 的配置。我们可以通过配置 Webpack 来生成符合我们需求的 sourcemap。
devtool
Webpack 中，我们可以通过 devtool 来配置 sourcemap。devtool 是一个字符串，它可以设置不同的 sourcemap 类型。下面是一些常见的 devtool 类型：
eval：每个模块都被 eval 函数包裹，代码映射到原始代码中。source-map：生成一个单独的 sourcemap 文件，对于生产环境来说，这是最佳选择。cheap-source-map：生成一个单独的 sourcemap 文件，只包含行信息，对于生产环境来说，这是最佳选择。cheap-module-source-map：生成一个单独的 sourcemap 文件，只包含行信息和模块信息，对于开发环境来说，这是最佳选择。
配置示例
下面是一个简单的 Webpack 配置示例，它使用 cheap-module-source-map 来生成 sourcemap：
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - -------
--
-------- -------------------------
--注意事项
- sourcemap 会增加构建时间和文件大小，所以在生产环境中应该尽可能地减少 sourcemap 的使用。
- 不同的 devtool 类型会对应不同的 sourcemap 生成方式，需要根据实际使用场景进行选择。
总结
通过合理配置 sourcemap，可以让我们在浏览器中更好地调试代码，提高开发效率。在实际开发中，我们需要根据实际场景来选择合适的 devtool 类型，以达到最佳的效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e138931886fbafa4e3ff09