在webpack中有個(gè)配置項(xiàng)
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選項(xiàng)
上面兩張圖可以打開chrome瀏覽器的sourcemap的設(shè)置。
webpack會(huì)把所有的js打包到一個(gè)js文件中瞬沦，這樣調(diào)試就很不方便太伊，sourcemap就是能把這個(gè)打包后的js文件映射到相關(guān)的具體的js文件中，這樣方便調(diào)試逛钻。
sourcemap更深入的原理可以參考阮一峰老師的講解：
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
