应用场景：在开发中我们哪里出错了，可以帮助我们快速的定位到哪里出错了。 

在webapck.config.js配置文件中，如果mode是development开发模式的话，是默认开启（就是不写devtool），是但定位的错误行数没那么准确。

设置devtool:"source-map"，即可捕获到错误，并且这个错误是源代码第几行的错误，如果devtool:'none'，虽然也会报错，但是报的是打包后的js文件哪一行错了，这肯定不是我们想要的。

我们在入口文件12行故意写错：

 

 在配置中mode为开发模式，且开启映射

 

 在页面中就能捕获到源码中错误位置

 

 devtool的介绍：https://webpack.js.org/configuration/devtool#devtool

还有其他的值可以设置，+代表速度，+号越多代表速度越快，-号代码速度慢，当然速度也就对应性能。

eval:速度最快,使用eval包裹模块代码,不会生成.map文件

source-map： 产生.map文件

cheap:较快，不用管列的信息,也不包含loader的sourcemap

Module：第三方模块，包含loader的sourcemap（比如jsx to js ，babel的sourcemap）

inline： 将.map作为DataURI嵌入打包后文件中，不单独生成.map文件

配置推荐：

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