在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的設(shè)置界面

在設(shè)置頁面，打開js和css的source maps選項

上面兩張圖可以打開chrome瀏覽器的sourcemap的設(shè)置。

webpack會把所有的js打包到一個js文件中，這樣調(diào)試就很不方便，sourcemap就是能把這個打包后的js文件映射到相關(guān)的具體的js文件中，這樣方便調(diào)試。

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