全面掌握Webpack4.0 (九)SourceMap 的配置 （持续更新…

前言：如果我们不对webpack做配置，那么一旦代码有报错，浏览器控制台提示的错误就会定位到webpack打包之后的js文件中，我们都知道打包后的js是经过压缩过的，我们从这个js文件中无法找到报错代码行的源文件，我们想知道的一定是报错的代码是哪一个源文件中的哪一行，sourceMap的作用简单说就是帮助我们在源文件和打包后的文件之间做一个映射，帮我们找到报错代码的源文件以及具体到源文件的哪一行代码，这样就帮助我们提高了调试效率。

source-map广义上讲就是webpack对于代码调试的的所有配置的集合。（不理解的话没有关系，先往下看）
source-map狭义上讲就是webpack的devtool这个配置项的一个属性值。（其实本文标题如果改成“全面掌握Webpack4.0 (九)devtool的配置 （持续更新…”也是合适的）

**那么什么又是devtool呢？**其实看字面意思就知道，就是一个开发配置。下面主要给大家讲一下devtool怎么配置，以及配置不同的属性值会有什么不同的结果。

下图截取自webpack官网（建议大家有时间多看看官方文档）：

首先告诉大家devtool在代码的哪里配置（如下图所示）：

上图就是devtool的第一种配置：
**devtool: ‘source-map’：**这样配置的话dist文件夹中会生成.map文件，这些map文件就是源代码和打包后的代码的映射关系。

第二种配置： devtool: ‘inline-source-map’：

这样配置的话dist文件夹中不会生成.map文件，.map文件中的内容会包含在js文件之中

第三种配置：devtool: ‘cheap-inline-source-map’：

这种配置不会生成.map文件，cheap表示错误提示只会提示到源码的哪一行，不会具体到哪一列，同时，这个映射只会在业务代码之间进行，不会映射第三方库的代码（如果想映射第三方代码，可以加一个关键字“module（cheap-module-inline-source-map）”）。

第四种配置：devtool: 'eval’

这种配置是打包速度最快的配置。不会生成.map文件，也不会将.map文件植入.js中，而是在打包后的js中以eval的方式进行映射。但是对于复杂的代码，这种配置对于错误的提示可能没有那么友好。

以上给大家介绍了四种devtool的配置（webpack官网中关于devtool的配置还有很多），都可以找到报错的代码在源码中的位置，但是不同配置的构建速度和提示结果是不同的，下面给大家讲一下开发环境和生产环境中各自的最优的配置应该是什么，这个大家记住就好：

开发环境：
devtool：eval-cheap-module-source-map：
这种配置方式的代码提示是比较全的，而且打包速度也比较快。

生产环境：
cheap-module-source-map：
正常来说上线的代码不需要这种映射进行代码错误提示，但是如果我们想最快的找到上线的代码的错误出处，这样配置是比较好的

下一篇：全面掌握Webpack4.0 (十)使用 WebpackDevServer 提升开发效率 （持续更新…