还原代码定位源头：源代码地图映射 - webpack 手把手教学第六课
2023-12-07 14:36:10
前言
在前端开发过程中，为了提高代码执行效率，通常会对代码进行压缩和丑化处理，但这样做会导致代码可读性降低，当出现问题时很难定位到代码的源头。此时，源代码映射 (source map) 就可以派上用场了。
源代码映射是一种将压缩后的代码和原始代码一一对应起来的技术，当在浏览器中遇到报错时，我们可以通过源代码映射来找到原始代码中的报错位置，从而方便我们进行调试。
Webpack 中的源代码映射
Webpack 提供了对源代码映射的支持，我们可以通过配置 devtool 选项来生成源代码映射。devtool 选项可以取以下几个值：
eval：不生成 source map，也不支持行列映射。cheap：只生成行列映射，但不支持原始源代码。cheap-module-source-map：与cheap类似，但支持原始源代码。cheap-source-map：与cheap类似，但支持完整的源代码映射。inline-cheap-source-map：将源代码映射内联到打包后的文件中。inline-cheap-module-source-map：与inline-cheap-source-map类似，但支持原始源代码。inline-source-map：将完整的源代码映射内联到打包后的文件中。hidden-source-map：生成一个隐藏的源代码映射，只有在使用特定工具时才能访问。nosources-source-map：只生成行列映射，但不包含源代码。
在实际开发中，我们通常使用 cheap-module-source-map 选项，因为它既能支持原始源代码，又能保证较快的编译速度。
如何使用源代码映射
要在 webpack 中使用源代码映射，需要在 webpack 配置文件中配置 devtool 选项。例如：
module.exports = {
devtool: 'cheap-module-source-map',
};
配置完成后，在 webpack 打包过程中就会生成源代码映射文件。源代码映射文件的命名通常与打包后的文件相同，但会在其文件名后添加 .map 后缀。例如，如果打包后的文件名为 main.js，那么源代码映射文件名为 main.js.map。
如何在浏览器中使用源代码映射
在浏览器中使用源代码映射需要在开发工具中开启源代码映射功能。以下是以 Chrome 浏览器为例的操作步骤：
- 打开 Chrome 浏览器的开发者工具。
- 点击“Sources”标签。
- 在左侧的面板中，找到打包后的文件。
- 右键单击打包后的文件，然后选择“Source map” > “Add source map”。
- 在弹出的对话框中，选择源代码映射文件。
完成以上步骤后，源代码映射就会被加载到浏览器中，当遇到报错时，我们就可以通过源代码映射来找到原始代码中的报错位置。
源代码映射的优缺点
源代码映射是一种非常有用的工具，它可以帮助我们快速定位代码中的错误，从而提高开发效率。但是，源代码映射也有一些缺点：
- 源代码映射会增加打包后的文件大小。
- 源代码映射会减慢打包速度。
- 源代码映射可能会暴露一些敏感信息，例如API密钥等。
总结
源代码映射是一种非常有用的工具，它可以帮助我们快速定位代码中的错误，从而提高开发效率。但是在使用源代码映射时，也需要考虑其缺点，并根据实际情况选择合适的 devtool 选项。
