源地图的迷雾——带你一探究竟

2023-10-19 10:59:29

一直以来，对于source map，我都处于似懂非懂的状态。webpack提供了多种类型的source map，让人眼花缭乱。这次，我决定一一尝试一下，彻底理解各种source map的区别。

什么是source map？

source map是一种将编译后的代码与原始源码建立关联的技术。它可以帮助开发人员在浏览器中调试代码，就像在本地调试一样。

source map的原理

source map的原理很简单，就是在编译后的代码中添加一些特殊的注释，这些注释包含了编译前代码的信息。当浏览器加载编译后的代码时，它会同时加载source map文件。当浏览器遇到一个错误时，它会使用source map文件来找到错误在原始源码中的位置，并将其显示给开发人员。

source map的生成

webpack可以生成两种类型的source map：

inline source map： 将source map直接嵌入到编译后的代码中。这种方式的好处是，它不需要额外的请求来加载source map文件，但缺点是，它会增加编译后的代码大小。
external source map： 将source map存储在一个单独的文件中。这种方式的好处是，它可以减小编译后的代码大小，但缺点是，它需要额外的请求来加载source map文件。

source map的使用

要使用source map，需要在webpack的配置文件中启用source map。可以通过在webpack.config.js文件中设置devtool选项来实现。

module.exports = {
  devtool: 'source-map',
};

启用source map后，webpack会在编译过程中生成source map文件。这个文件通常位于与编译后的代码相同的目录中，并具有与编译后的代码相同的文件名，只是扩展名不同。例如，如果编译后的代码名为main.js，则source map文件名为main.js.map。

source map的类型

webpack可以生成以下几种类型的source map：

cheap-module-source-map： 这种类型的source map只包含模块级别的source map。这意味着，它可以帮助你找到错误在哪个模块中，但不能帮助你找到错误在模块中的具体位置。
cheap-source-map： 这种类型的source map包含了完整的source map，但它不包含源代码中的注释。这意味着，它可以帮助你找到错误在代码中的具体位置，但不能帮助你理解代码的含义。
eval-source-map： 这种类型的source map包含了完整的source map，包括源代码中的注释。这意味着，它可以帮助你找到错误在代码中的具体位置，也可以帮助你理解代码的含义。
hidden-source-map： 这种类型的source map与eval-source-map类似，但它不会将source map暴露给浏览器。这意味着，它可以帮助你调试代码，但不能帮助你理解代码的含义。

source map的选择

在实际开发中，我们应该根据不同的情况选择不同的source map类型。