浅谈webpack devtool里的7种SourceMap模式

当我们使用webpack打包项目时，我们可以通过 devtool 选项来配置生成source map。 它们有不同的视觉效果（适用于不同的开发场景）和内存资源消耗（可能影响构建时间）。 下面我们来详细讲解webpack devtool里的7种source map模式。

1. eval

这种模式是将每个模块封装到 eval(...) 中，因此生成的source map只针对eval后生成的代码，不包含初始代码。这使得它是最快的选项，但也是不可读的，因为它没有将代码映射回原始代码。它的类型为 eval。

devtool: 'eval'

2. source-map

这种模式能够生成传统的source map，它为每一行代码生成一个单独的map文件，因此打包的速度会比较慢。它提供最佳的质量，但代价是构建速度会更慢。它的类型为 source-map。

devtool: 'source-map'

3. cheap-source-map

这种模式与 source-map 类似，但它不包含列信息（即哪个位置出错了），所以对构建速度和源代码保护有一定的帮助。它的类型为 cheap-source-map。

devtool: 'cheap-source-map'

4. cheap-module-source-map

这种模式与 cheap-source-map 一样，但它在加载了包含loader的Source Map时，会显示 loader 的名称。它的类型为 cheap-module-source-map。

devtool: 'cheap-module-source-map'

5. inline-source-map

这种模式会将source map以dataURL的方式打包进源文件中，而不是生成一个单独的Map文件，这对于较小的项目比较有用。它的类型为 inline-source-map。

devtool: 'inline-source-map'

6. eval-source-map

这种模式是速度最快的，而且生成的Source Map不会消耗磁盘空间。它通过在每个模块末尾追加 //# sourceMappingURL=eval-source-map 的 sourceMappingURL 注释来实现。它的类型为 eval-source-map。

devtool: 'eval-source-map'

7. hidden-source-map

这种模式不会在源代码中添加source map，同时生成一个单独的map文件，只提供给捕获异常时使用。它的类型为 hidden-source-map。

devtool: 'hidden-source-map'

示例1:

// webpack.config.js
module.exports = {
  devtool: 'source-map',
  // ...
}

这个例子中我们将devtool配置成 source-map ，它将为每个文件生成单独的SourceMap，并为报错提供详细的信息。

示例2:

// webpack.config.js
module.exports = {
  devtool: 'cheap-module-source-map',
  // ...
}

这个例子中我们将devtool配置成 cheap-module-source-map ，它对于大型项目是非常有用的，并且将为报错提供module信息。

除了以上列举的模式外，还有其他模式可以使用。 但需要根据具体的情况来选择正确的源码映射类型，以获得最佳的开发体验。