在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
