前言
在前端开发中，我们经常需要对代码进行调试，定位问题，甚至是对压缩后的代码进行分析。而 sourcemap （源代码映射）就是一项能够帮助我们解决这些问题的技术。
在本文中，我们将详细介绍 webpack 中的 sourcemap，包括它的原理、使用方法以及注意事项。
什么是 sourcemap
sourcemap 是一种文件，它能够将编译后的代码映射回原始源代码。通过 sourcemap，我们可以在浏览器控制台或者调试器中，看到源代码的行数和列数，方便我们进行调试和定位问题。
webpack 中的 sourcemap
在 webpack 中，我们可以通过在配置文件中设置 devtool 属性，来生成 sourcemap 文件。
module.exports = {
// ...
devtool: 'source-map'
};webpack 中的 devtool 有多种选项，如下所示：
eval：每个模块都使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。source-map：生成一个独立的 sourcemap 文件，对于大型项目来说，这是最好的选择。cheap-source-map：生成一个快速而不完全的 sourcemap 文件，对于开发环境来说，这是最好的选择。cheap-module-source-map：生成一个快速而不完全的 sourcemap 文件，同时忽略文件的 loader，对于开发环境来说，这是最好的选择。
如何使用 sourcemap
在 webpack 中生成 sourcemap 文件之后，我们需要在浏览器中开启 sourcemap 功能，才能够看到源代码的行数和列数。
在 Chrome 浏览器中，我们可以在开发者工具的 Sources 面板中，勾选 Enable JavaScript source maps 选项，来开启 sourcemap 功能。
在开启 sourcemap 功能之后，我们可以在浏览器中的控制台中，看到源代码的行数和列数。
注意事项
在生成 sourcemap 文件时，我们需要注意以下几点：
- 开发环境和生产环境的 sourcemap 设置不同。在开发环境中，我们可以使用
cheap-module-eval-source-map这样的选项，以提高构建速度；而在生产环境中，我们需要使用source-map这样的选项，以保证代码质量和稳定性。 - sourcemap 文件应该被保护，以防止泄露源代码。在生产环境中，我们不应该将 sourcemap 文件发布到公共服务器上，而是应该只在需要进行调试时，将 sourcemap 文件提供给开发人员。
- 在使用一些特殊的构建工具或者插件时，sourcemap 文件可能会出现一些问题。我们需要仔细查看文档，并进行测试，以确保 sourcemap 文件正常工作。
示例代码
下面是一个使用 webpack 和 sourcemap 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- ------------
--结论
在本文中，我们详细介绍了 webpack 中的 sourcemap 技术，包括它的原理、使用方法以及注意事项。通过使用 sourcemap，我们可以更加方便地进行前端开发和调试，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67592aa736908a98ca6a0bc0