1概述

在开发代码的过程中,肯定会遇到很多问题和报错信息。

很多时候需要知道具体是哪一行代码出了问题。

然而按照前面配置的代码优化和压缩技术,打包出来的代码都成了一行,可读性很差。

这时候可以在开发环境添加source-map配置。

source-map:主要是做源码映射。

它分为以下几种模式:

2 source-map分类

下面会提供各个类别的作用以及对应的webpack配置。

1. devtool:"source-map"

会生成 单独的sourcemap文件(.map)

报错时,会定位到 当前报错的行和列(行号和报错提示)

文件最大,信息最全。

webpack配置:

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

2. devtool:"eval-source-map"

不生成 单独的sourcemap文件(.map)

但是可以 定位到当前报错的行和列(行号和报错提示)

webpack配置:

module.exports = {
  devtool:"eval-source-map",
}

3. devtool:"cheap-module-source-map"

会生成 单独的映射文件

报错时,会定位到当前报错的行,但不会定位到列(报错提示)

webpack配置:

module.exports = {
  devtool:"cheap-module-source-map",
}

4. devtool:"cheap-module-eval-source-map"

不生成 单独的文件,集成在打包后的文件中

报错时,会定位到当前报错的行,但不会定位到列(报错提示)

webpack配置:

module.exports = {
  devtool:"cheap-module-eval-source-map",
}

3 总结

表格对比,一目了然。

名词解析:
新文件:源码映射文件;
行:报错代码在源代码中的行号;
列:报错代码的错误提示文案(鼠标放在报错代码上会有提示文案);

配置是否生成新文件是否定位到行是否定位到列
source-map
cheap-module-source-map
eval-source-map
cheap-module-eval-source-map