背景

我们平时开发项目时，也就是在开发环境，时常会手误敲错代码导致报错，那么这时我们如何快速的定位出错的位置以及查看报的什么错呢？也就是说 如何精准的定位到哪个文件哪一行代码报的什么错误 ？

报错位置不够精确

项目中src/index.js里面的代码我们手误写成这样，误敲了个hahah，如下：

import {add} from './other.js'
// import css from "./index.css";
import test from "./test.less";
console.log("hello 浅唱");
hahah

项目目录：

然后我们执行构建，执行构建时也没有报错：

生成的出口文件目录如下：

然后在打开入口文件src/index.js生成的dist/index.js，真是文件名后面有一串hash是在配置文件里配置好的，为了解决浏览器缓存，看下dist/index.js代码： dist/index.js:

可以看到我们写的代码是在里面的。 再看下dist/index.html:

看下页面效果:

指出报了什么错，但是，它的页面位置不准确，源码中我出错的位置是在第5行，但是最后这里给我提示的位置是第8行。

这就导致我们去找出错代码时不能很明了的去定位。 怎么才能精准定位呢？ 使用devtool设置。

设置devtool

devtool: 控制是否生成，以及如何生成 source map。 选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。 这是 devtool的介绍链接

source-map

源代码和打包后的代码的映射关系，通过sourceMap定位到源代码。 也就是说：devtool值设置成source-map,会生成bundle文件的映射文件，方便定位源文件的错误位置，也就是方便定位到源文件的哪个文件哪代码出错了。 在dev模式中，默认开启，关闭的话可以在配置文件里这样设置：

devtool:'none'

现，我们在项目的webpack.config.js文件中去配置：

执行构建，构建成功后，看下出口文件夹dist下的文件；

我们可以看到每个bundle文件都生成对应的.map映射文件。 dist/index.js的map映射文件，这个是给电脑看得，我们不用管，如下：

最后，我们再打开页面dist/index.html看下效果：

控制台这里是成功定位到源码对应的精准位置第5行，我们再看看bundle里面的定位：

也是精准定位到源码的。

inline-source-map

但是有同学觉得每个bundle文件都会生成一个.map文件，文件太多太占地方，可以用inline-source-map来解决，把每个bundle文件对应的.map文件镶嵌到bundle中去； 修改配置，webpack.config.js:

devtool:'inline-source-map'

执行构建，看下dist目录：

可以看到之前的设置每个bundle文件生成的.map文件没有了，但是每个bundle文件里面的最后是有引入的一个map文件的url的。所以就是，嵌入在bundle文件里了。 最后，再看看页面效果：

控制台和bundle文件的错误定位源码的位置是精准的。

修改好js文件，再次执行

我们，再把src/index.js文件里的代码修改正确，试试： src/index.js：

执行构建：

看页面效果：

其他的设置值

eval: 速度最快，使用eval包裹模块代码； cheap: 较快，不包含列信息； Module: 第三方模块，包含loader的sourcemap; 具体：

其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。

配置推荐

开发环境配置：

devtool:"cheap-module-eval-source-map",// 开发环境配置

线上⽣成配置：

//线上不推荐开启

devtool:"cheap-module-source-map", // 线上⽣成配置