什么是Source Maps
Source Map字面意思就是原始地圖捷绒，當(dāng)開發(fā)環(huán)境中的源代碼經(jīng)過壓縮袄友，去空格担败，babel編譯轉(zhuǎn)化后昔穴，最終可以得到適用于生產(chǎn)環(huán)境的項目代碼，這樣處理后的項目代碼和源代碼之間差異性很大提前，當(dāng)打包出現(xiàn)問題需要我們debug的時候吗货，我們往往都感到很頭疼，因為打包后的文件都是壓縮到一起的狈网，我們很難找到問題所在宙搬，這樣嚴重影響調(diào)試效率。為了我們開發(fā)過程中debug更方便快捷拓哺，我們就要用到Source Maps來定位到開發(fā)中的源代碼勇垛。
Source map就是一個信息文件，里面儲存著位置信息拓售，也就是說窥摄，轉(zhuǎn)換后的代碼的每一個位置，所對應(yīng)的轉(zhuǎn)換前的位置础淤。當(dāng)我們在開發(fā)中出錯的時候，出錯工具將直接顯示原始代碼哨苛，而不是轉(zhuǎn)換后的代碼鸽凶，這樣使得編譯后的代碼可讀性更高，也更方便快捷調(diào)試建峭。
在webpack配置中配置source maps時我們需要先配置devtool
devtool配置有四種不同的方法玻侥，具體如下：
| devtool配置 | 描述 |
|---|---|
source-map |
在一個單獨的文件中產(chǎn)生一個完整且功能完全的文件。這個文件具有最好的source map亿蒸，但是它會減慢打包速度 |
cheap-module-source-map |
在一個單獨的文件中生成一個不帶列映射的map凑兰，不帶列映射提高了打包速度，但是也使得瀏覽器開發(fā)者工具只能對應(yīng)到具體的行边锁，不能對應(yīng)到具體的列（符號）姑食，會對調(diào)試造成不便 |
eval-source-map |
使用eval打包源文件模塊，在同一個文件中生成干凈的完整的source map茅坛。這個選項可以在不影響構(gòu)建速度的前提下生成完整的sourcemap音半，但是對打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。在開發(fā)階段這是一個非常好的選項，在生產(chǎn)階段則一定不要啟用這個選項 |
cheap-module-eval-source-map |
這是在打包文件時最快的生成source map的方法曹鸠，生成的Source Map 會和打包后的JavaScript文件同行顯示煌茬，沒有列映射，和eval-source-map選項具有相似的缺點 |
注意：cheap-module-eval-source-map方法構(gòu)建速度更快彻桃，但是不利于調(diào)試坛善，推薦在大型項目考慮時間成本時使用。
從以上的四個位置方法來看邻眷，自上而下打包速度越來越快浑吟，但是在打包過程中也出現(xiàn)了各種隱患，這也驗證了一句話：“心急吃不了熱豆腐”耗溜。對于我們現(xiàn)在來說我們就可以用到eval-source-map组力。
本文以webpack文章的demo為例，如果未閱讀上文抖拴，并且想了解完整過程請點擊回到上文
在配置文件webpack.config.js中配置如下代碼
module.exports = {
...
devtool: 'eval-source-map', // 在這里配置devtool
...
}
