sourcemap详解

在webpack中有个配置项

devtool有以下取值：
eval
 - Each module is executed with eval
 and //@ sourceURL
.
source-map
 - A SourceMap is emitted. See also output.sourceMapFilename
.
hidden-source-map
 - Same as source-map
, but doesn’t add a reference comment to the bundle.
inline-source-map
 - A SourceMap is added as DataUrl to the JavaScript file.
eval-source-map
 - Each module is executed with eval
 and a SourceMap is added as DataUrl to the eval
.
cheap-source-map
 - A SourceMap without column-mappings. SourceMaps from loaders are not used.
cheap-module-source-map
 - A SourceMap without column-mappings. SourceMaps from loaders are simplified to a single mapping per line.

接下来聊聊source-map

打开devTools的设置界面

在设置页面，打开js和css的source maps选项

上面两张图可以打开chrome浏览器的sourcemap的设置。

webpack会把所有的js打包到一个js文件中，这样调试就很不方便，sourcemap就是能把这个打包后的js文件映射到相关的具体的js文件中，这样方便调试。

sourcemap更深入的原理可以参考阮一峰老师的讲解：
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html