webpack——devtool裏的7種SourceMap模式

咱們先來看看文檔對這 7 種模式的解釋：

模式	解釋
eval	每一個module會封裝到 eval 裏包裹起來執行，而且會在末尾追加註釋 //@ sourceURL.
source-map	生成一個SourceMap文件.
hidden-source-map	和 source-map 同樣，但不會在 bundle 末尾追加註釋.
inline-source-map	生成一個 DataUrl 形式的 SourceMap 文件.
eval-source-map	每一個module會經過eval()來執行，而且生成一個DataUrl形式的SourceMap.
cheap-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，同時 loader 的 sourcemap 也被簡化爲只包含對應行的。

注1：

webpack 不只支持這 7 種，並且它們仍是能夠任意組合上面的eval、inline、hidden關鍵字，就如文檔所說，你能夠設置 souremap 選項爲 cheap-module-inline-source-map。

注2：

若是你的modules裏面已經包含了SourceMaps，你須要用source-map-loader 來和合並生成一個新的 SourceMaps。

使用結果有何不一樣

下面咱們將列出這 7 種模式打包編譯後的結果，從中看看他們的異同：

eval

webpackJsonp([1],[  
function(module,exports,__webpack_require__){    
eval(      ...      
//# sourceURL=webpack:///./src/js/index.js?'    )  },  
function(module,exports,__webpack_require__){    
eval(      ...      
//# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader'    )  },  
function(module,exports,__webpack_require__){   
 eval(      ...      
 //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"    )  }, ...])

 

eval 模式會把每一個 module 封裝到 eval 裏包裹起來執行，而且會在末尾追加註釋。

Each module is executed with eval and //@ sourceURL.

source-map

webpackJsonp([1],[  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},  ... ])//# sourceMappingURL=index.js.map

與此同時，你會發現你的 output 目錄下多了一個 index.js.map 文件。

咱們能夠把這個 index.js.map 格式化一下，方便咱們在下文的觀察比較：

{  
"version":3,  
"sources":[
    "webpack:///js/index.js","webpack:///./src/js/index.js",    
    "webpack:///./~/.npminstall/css-loader/0.23.1/css-loader/lib/css-base.js",    ... ],  
"names":["webpackJsonp","module","exports"...], 
"mappings":"AAAAA,cAAc,IAER,SAASC...",  
"file":"js/index.js",  
"sourcesContent":[...],  
"sourceRoot":""
}

關於 sourceMap 行列信息如何映射源代碼的詳解，此處不是咱們要重點討論的話題，從略。

感興趣的同窗能夠參考阮一峯老師的科普文：JavaScript Source Map 詳解

hidden-source-map

webpackJsonp([1],[  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},  ... ])

與 source-map 相比少了末尾註釋，

但 output 目錄下的 index.js.map 沒有少

inline-source-map

webpackJsonp([1],[  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},  
function(e,t,i){...},  ... ])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...

能夠看到末尾的註釋 sourceMap 做爲 DataURL 的形式被內嵌進了 bundle中，因爲 sourceMap 的全部信息都被加到了bundle中，整個 bundle 文件變得碩大無比。

eval-source-map

webpackJsonp([1],[  
function(module,exports,__webpack_require__){    
eval(      ...      
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...    )  },  function(module,exports,__webpack_require__){    
eval(      ...      
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...    )  },    function(module,exports,__webpack_require__){   
eval(      ...      
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...    )  },  ... ]);

和 eval 相似，可是把註釋裏的 sourceMap 都轉爲了 DataURL。

cheap-source-map

和 source-map 生成結果差很少。output 目錄下的index.js內容同樣。

可是 cheap-source-map 生成的 index.js.map 的內容卻比 source-map 生成的 index.js.map 要少不少代碼，咱們對比一下上文 source-map 生成的 index.js.map 的結果，發現 source 屬性裏面少了列信息，只剩一個"webpack:///js/index.js"。

// index.js.map
{  
"version":3,  "file":"js/index.js",  
"sources":["webpack:///js/index.js"],  
"sourcesContent":[...],  
"mappings":"AAAA",  
"sourceRoot":""
}

cheap-module-source-map

// index.js.map
{  
"version":3,  "file":"js/index.js",  
"sources":["webpack:///js/index.js"],  
"mappings":"AAAA",  "sourceRoot":""
}

在 cheap-module-source-map 下 sourceMap 的內容更少了，sourceMap的列信息減小了，能夠看到 sourcesContent 也沒有了。

這麼多模式用哪一個好？

開發環境推薦：

cheap-module-eval-source-map

生產環境推薦：

cheap-module-source-map

這也是下版本 webpack 使用 -d 命令啓動 debug 模式時的默認選項

緣由以下：

1. 使用 cheap 模式能夠大幅提升 souremap 生成的效率。大部分狀況咱們調試並不關心列信息，並且就算 sourcemap 沒有列，有些瀏覽器引擎（例如 v8） 也會給出列信息。

2. 使用 eval 方式可大幅提升持續構建效率。官方文檔提供的速度對比表格能夠看到 eval 模式的編譯速度很快。

3. 使用 module 可支持 babel 這種預編譯工具（在 webpack 裏作爲 loader 使用）。

4. 使用 eval-source-map 模式能夠減小網絡請求。這種模式開啓 DataUrl 自己包含完整 sourcemap 信息，並不須要像 sourceURL 那樣，瀏覽器須要發送一個完整請求去獲取 sourcemap 文件，這會略微提升點效率。而生產環境中則不宜用 eval，這樣會讓文件變得極大。

SourceMap模式效率對比圖