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 总结

表格对比，一目了然。

名词解析：
新文件：源码映射文件；
行：报错代码在源代码中的行号；
列：报错代码的错误提示文案（鼠标放在报错代码上会有提示文案）；