溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我們先來看看文檔對這 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 withevaland//@ 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 行列信息如何映射源代碼的詳解，此處不是我們要重點討論的話題，從略。
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 模式時的默認選項
原因如下：
SourceMap模式效率對比圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
