如何选择 Webpack SourceMap 配置项

不同的使用场景有不同的需求，SouceMap 也不例外。

TL;DR

开发环境: 'cheap-module-eval-source-map' 或者 'cheap-module-source-map'
测试环境：'source-map'
生产环境：'none' 或者 'nosources-source-map'

SourceMap 规则设计之道

系统架构的所有抉择皆权衡。
SourceMap 的配置规则选项亦如是。
从场景来分类，有开发环境、测试环境、生产环境之分。
从需求来分类，有构建速度、映射文件体积、源码映射精确度之分。

SourceMap 规则使用之术

构建速度 <--> 源码映射精确度 这一对矛盾，是 SourceMap 配置项选择的主要权衡点。
使用场景再多，也是根据场景需要来确定这个主要权衡点。

场景分析

不同使用场景的主要区别：

使用场景	开发环境	测试环境	生产环境
主要需求	节省构建开支	快速、精确定位问题	保护源代码、快速定位问题
主要特点	频繁多次构建。源码无需保密	一次构建。源码无需保密	一次构建。源码需要保密

配置项分类

命名是软件工程的一大学问。
SourceMap 的配置项名称做到了见名知意。虽然配置项繁多，但其名称不外乎由几个关键字排列组合而得。
下面聊一聊这几个重要关键字的含义。

按源码精确度分类：

module

module 是模块的意思。
这一类配置项，产生的源码映射文件，可以跟你编写的代码源文件一致。

至于为何是 module 这一关键字？
因为 Webpack 中万物皆模块(module)，模块经过 loader 加载之后，生成最终的打包文件。
对于现代前端项目来说，一些 ES6 语法、JSX 语法糖、Vue 单文件组件等模块，一般经过 babel-loader 等一系列 loader 处理，最终生成能运行在浏览器上的文件。而此时运行的文件跟你编写的源代码已经大相径庭。
module 这一关键字很好地表明了，我需要生成的代码映射文件，是未经过各种 loader 处理前的那个 module。

eval

eval 是 evaluate 的简写。是 JavaScript 中的一个执行函数，可以传入字符串表示的 JS 代码并执行。
这一类配置项，不产生源码映射文件，可以根据运行时代码映射到所在的源码文件路径。
之于为何是 eval 这一个关键字，也很好理解。因为其产生的代码映射文件的确是把源码包装在 eval 函数中执行的，而且映射出的源码是最终生成打包文件的样子。

按构建速度分类：

cheap

cheap，廉价、代价低的意思。
这一类配置项，代价低就低在生成的源码映射文件所需的构建成本低。
因为其记录的信息量较少，只记录了行信息，没有记录列的信息。
记录信息量少，所以构建成本低，构建速度自然就更快。