sourse-map ，裡面都有個 map 了，肯定是映射的意思。sourse-map 就是一份源碼和轉換後代碼的映射文件。 ...
Webpack 有非常多的概念，很多名詞長得都差不多。我把這些分散在文檔和教程里的內容總結起來，寫了一份 webpack 中的易混淆知識點，目前看是全網獨一份，大家可以加個收藏，方便以後檢索和學習。
全集鏈接 ➡️ webpack 易混淆知識點
sourse-map ，裡面都有個 map 了，肯定是映射的意思。sourse-map 就是一份源碼和轉換後代碼的映射文件。具體的原理內容較多，感興趣的同學可以自行搜索，我這裡就不多言了。
我們先從官網上看看 sourse-map 有多少種類型：
emmmm，13 種，告辭。
如果再仔細看一下，就發現這 13 種大部分都是 eval、cheap、inline 和 module這 4 個詞排列組合的，我做了個簡單的表格，比官網上直白多了：
| 參數 | 參數解釋 |
|---|---|
| eval | 打包後的模塊都使用 eval() 執行，行映射可能不准；不產生獨立的 map 文件 |
| cheap | map 映射只顯示行不顯示列，忽略源自 loader 的 source map |
| inline | 映射文件以 base64 格式編碼，加在 bundle 文件最後，不產生獨立的 map 文件 |
| module | 增加對 loader source map 和第三方模塊的映射 |
還不明白？可以看看 demo。
我們對 webpack 做一些配置，devtool 是專門配置 source-map 的。
......
{
devtool: 'source-map',
}
......
index.js 文件為了簡便，我們只寫一行代碼，為了得出報錯信息，我們故意拼錯：
console.lg('hello source-map !') // log 寫成 lg
下麵我們試一試常見的幾個配置：
5.1 source-map
source-map 是最大而全的，會生成獨立 map 文件：
註意下圖游標的位置，，source-map 會顯示報錯的行列信息：
5.2 cheap-sourse-map
cheap，就是廉價的意思，它不會產生列映射，相應的體積會小很多，我們和 sourse-map 的打包結果比一下，只有原來的 1/4 。
5.3 eval-source-map
eval-source-map 會以 eval() 函數打包運行模塊，不產生獨立的 map 文件，會顯示報錯的行列信息：
// index.bundle.js 文件
!function(e) {
// ......
// 省略不重要的代碼
// ......
}([function(module, exports) {
eval("console.lg('hello source-map !');//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi4vc3JjL2luZGV4Mi5qcz9mNmJjIl0sIm5hbWVzIjpbImNvbnNvbGUiLCJsZyJdLCJtYXBwaW5ncyI6IkFBQUFBLE9BQU8sQ0FBQ0MsRUFBUixDQUFXLG9CQUFYIiwiZmlsZSI6IjAuanMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zb2xlLmxnKCdoZWxsbyBzb3VyY2UtbWFwICEnKSJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///0\n")
}
]);
5.4 inline-source-map
映射文件以 base64 格式編碼，加在 bundle 文件最後，不產生獨立的 map 文件。加入 map 文件後，我們可以明顯的看到包體積變大了；
// index.bundle.js 文件
!function(e) {
}([function(e, t) {
console.lg("hello source-map !")
}
]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4uL3NyYy9pbmRleDIuanMiXSwibmFtZXMiOlsiaW5zdGFsbGVkTW9kdWxlcyIsIl9fd2VicGFja19yZXF1aXJ......
// base64 太長了，我刪了一部分，領會精神
5.5 常用配置：
上面的幾個例子都是演示，結合官網推薦和實際經驗，常用的配置其實是這幾個：
1.source-map
大而全，啥都有，就因為啥都有可能會讓 webpack 構建時間變長，看情況使用。
2.cheap-module-eval-source-map
這個一般是開發環境（dev）推薦使用，在構建速度報錯提醒上做了比較好的均衡。
3.cheap-module-source-map
一般來說，生產環境是不配 source-map 的，如果想捕捉線上的代碼報錯，我們可以用這個
寫在最後
這篇文章差不多就寫到這裡了，後面我還會寫一些 webapck 打包優化的文章。
從學習 webpack 到這篇輸出差不多花了 2 個星期的時間，個人感覺 webpack 說到底，也就是工具鏈的一環，很多配置內容沒必要像 JavaScript 的內置方法一樣需要記憶，自己寫個大而全的 demo，知道配置項大概能幹個啥，要用的時候查一下就行了。
因此我總結了這篇 webpack 易混淆知識點的文章，大家可以點擊收藏一下，以後準備面試或者複習的時候，看一下就懂個大概了。
最後推薦一下我的個人公眾號：「滷蛋實驗室」，平時會分享一些前端技術和數據分析的內容，大家感興趣的話可以關註一波：
