webpack的sourcemap各种参数详解

webpack配置中的devtool字段可以允许我们控制sourcemap的生成，提供开发时候的代码定位功能

关于sourcemap可以参考 sourcemap详解

1. sourcemap关键字

sourcemap关键字如下

• eval
  使用eval包裹代码模块（这个代码块是转译后的代码，并未进行打包和压缩）
  eval包裹每个代码块时候，会在后面增加"sourceURL"（和sourcemap里的"sourceMappingURL"不同）用来定位到原文件。
  eval模式优势在于，它是将每个模块单独eval执行，因此如果配合source-map使用，就可以单独缓存每个模块的sourcemap，这样就可以在重新构建时候实现增量修改sourcemap，节省时间。如果不使用eval模式，就是一个文件（chunk）对应一个sourcemap，重新构建时候需要将整个chunk的sourcemap重新生成，更耗费时间。
  因此eval模式的优势就在于重新构建的速度更快
• source-map
  产生source map
• cheap
  用来修饰source-map
  让sourcemap只保存行信息，不保存列信息
  让sourcemap只将打包后的代码映射到转换过的代码，不映射到原始源代码
  【由于源代码到转译后的代码的映射关系由相应的loader提供，因此cheap模式应该不需要关心这部分的sourcemap】
• module
  用来修饰cheap-source-map
  让sourcemap可以映射到原始源代码
  【由于源代码到转译后的代码的映射关系由相应的loader提供，因此module模式应该会处理这部分sourcemap，以最终得到到原始源代码的映射】
• inline
  用来修饰source-map
  将.map作为DataURI嵌入，不单独生成.map文件

2. 常见sourcemap组合

devtool	构建速度	重新构建速度	生产环境	品质
(none)	+++	+++	yes	打包后的代码
eval	+++	+++	no	生成后的代码
cheap-eval-source-map	+	++	no	转换过的代码（仅限行）
cheap-module-eval-source-map	o	++	no	原始源代码（仅限行）
eval-source-map	--	+	no	原始源代码
cheap-source-map	+	o	no	转换过的代码（仅限行）
cheap-module-source-map	o	-	no	原始源代码（仅限行）
inline-cheap-source-map	+	o	no	转换过的代码（仅限行）
inline-cheap-module-source-map	o	-	no	原始源代码（仅限行）
source-map	--	--	yes	原始源代码
inline-source-map	--	--	no	原始源代码
hidden-source-map	--	--	yes	原始源代码
nosources-source-map	--	--	yes	无源代码内容

\

品质说明

\

• 原始源代码
  你写的代码，未经过任何处理
• 转换过的代码
  经过各种loader转译后的代码
• 生成后的代码
  转译后并经过webpack处理，注入webpack运行时代码后的代码
• 打包后的代码
  合成一个chunk后的、压缩过的代码

3. 最佳实践

• 本地开发环境使用"eval-cheap-module-source-map"
  这个配置提供到源代码的的完整映射，方便定位问题，并且不需要通常不必要的行映射，提高了构建速度，并且由于使用了eval，重构建速度更高
• 测试环境使用"eval-cheap-module-source-map"
  原因和本地开发环境一样，如果介意内联sourcemap导致文件过大，可以配置"cheap-module-source-map"
• 线上尽量不使用sourcemap，防止业务逻辑暴露。

线上debug

1. 将sourcemap上传到线上错误监控系统中，这样代码报错就可以定位到源码的相应位置
2. 将sourcemap上传到公司内网