[webpack] sourcemap

1、关于SourceMap

JS代码在实际项目中包括框架以及各种函数库，实际需要进行优化、压缩、编译后才能上线， 这样的代码在实际运行在出错时难以定位位置。
Source map 是将转换后的代码与原来代码位置进行对应记录的文件。通过sourcemap文件，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。

source map在使用时类似如下：
//@ sourceMappingURL=/path/to/file.js.map

关于DataURL：
DataURL 是一种协议，提供了一种将图片"嵌入"到HTML中的方法。通过将图片转换成base64编码的字符串形式，存储在URL中，冠以mime-type。
如：<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP/…yH5BAAAAAAALAAAAAAzADEAAAK8jI+==">
DataURL适用场景: a、访问外部资源受限 b、图片体积小，占用一个HTTP会话资源浪费

2、Webpack 中 各种Source map 值：

webpack在打包时支持Sourcemap，值有十几种，但source map的基本类型只有5种，其他的值都是由这5种组合成的。
这5种分别为： eval，cheap, moudule，inline,source-map。

• eval:
  Eval 不会生成独立的source map文件， 是在每个模块后，增加sourceURL来关联模块处理前后的对应关系。sourceURL 是压缩前的代码。因为不需要生成模块的sourcemap，因此打包的速度很快。

  //# sourceURL=webpack:///./src/js/index.js

• source-map会为每一个打包后的模块生成独立的soucemap文件

  //# sourceMappingURL=index.js.map

• Inline不会生成独立的.map文件，而是将.map文件以dataURL的形式插入。

  //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...

• Cheap
  cheap在打包后同样会为每一个模块生成.map文件，但是与source-map的区别在于cheap生成的.map文件会忽略原始代码中的列信息。增加cheap后也不会有loader模块之间对应的sourcemap(即不能追踪到类似的jsx 等非js资源的具体位置)

• module
  包含loader 模块之间的sourcemap

  对于 UglifyJsPlugin 插件，如果你压缩代码时启用了 source map，或者想要让 uglifyjs 的警告能够对应到正确的代码行，需将 UglifyJsPlugin 的 sourceMap 设为 true。UglifyJsPlugin此插件默认值是false。