瞭解SourceMap的各類格式區別

    webpack的devtool用了蠻久了，但每次都是默認使用其中幾個，對其餘的並不瞭解，這節準備吧每種方式都打包一下，看看到底有啥區別。

官網的方式說明

devtool	構建速度	從新構建速度	生產環境	品質(quality)
(none)	+++	+++	yes	打包後的代碼(沒有sourcemap)
eval	+++	+++	no	生成後的代碼
cheap-eval-source-map	+	++	no	轉換過的代碼（僅限行）
cheap-module-eval-source-map	o	++	no	原始源代碼（僅限行）
eval-source-map	--	+	no	原始源代碼
cheap-source-map	+	o	no	轉換過的代碼（僅限行）
cheap-module-source-map	o	-	no	原始源代碼（僅限行）
inline-cheap-source-map	+	o	no	轉換過的代碼（僅限行）
inline-cheap-module-source-map	o	-	no	原始源代碼（僅限行）
source-map	--	--	yes	原始源代碼
inline-source-map	--	--	no	原始源代碼
hidden-source-map	--	--	yes	原始源代碼
nosources-source-map	--	--	yes	無源代碼內容

+++ 很是快速, ++ 快速, + 比較快, o 中等, - 比較慢, -- 慢

開始

1. eval

打包後只生成bundle.js一個文件

代碼經過eval執行，能映射到每一個模塊的代碼，可是代碼只能看到生成後的代碼，打包和構建的速度都很快(不須要複雜轉換和打包)，可是不能定位到源碼的真實位置

2. cheap-eval-source-map

一樣只有一個bundle.js

基本上和eval相似，相比而言映射的代碼仍是轉換過的，而不是源碼，即轉換過的代碼，示例中其實轉換過的代碼和源碼一直，由於只是用的js最基本的語法，因此看不到轉換

3. cheap-module-eval-source-map

具有上面的特性，此次能看到的代碼是真正的源碼，可是注意到scss文件和jsx是分開的，可是隻是精確到每一行

4. eval-source-map

這一次是精確到每一列了，能夠看出和上面的區別，同一行能夠多段調試

5. cheap-source-map

和cheap-eval-source-map的區別在於不是使用eval進行處理，而是生成.map來映射代碼，經過上圖能夠看到，file、sources、sourceContent、mappings，

1. file表示打包後的文件
2. source表明源文件地址
3. sourceContent則是源碼
4. mappings表示轉換過的代碼和sources的映射(能夠經過Source Map原理探究瞭解)

6. cheap-module-source-map

這個圖就不列舉，和上一個的區別就是.map中存放的是源碼，不是轉換過的代碼

7. inline-cheap-source-map

和cheap-source-map相似，可是不生成.map文件，直接在打包的文件中使用base64存.map文件內容，我大概對比了一下打包後的文件，inline-cheap-source-map文件，由於轉成base64更大了

8. inline-cheap-module-source-map

這個和上者的區別也就是個變成展現的是源碼，不是轉換過的代碼

9. source-map

這個基本上是開發環境都在用的，一樣和cheap-source-map，可是不只限於行，精確到每一列，來看看.map文件有什麼變化

能看到在.map中多了names，names中其實就是每一個變量/函數名，這樣就能精確到每個變量/函數，因此能夠精確到每一列

10. inline-source-map

看到inline大概就明白了，就是把.map集中到打包文件中

11. hidden-source-map

和source-map基本相同，可是不會有sourceMappingURL註釋，這樣你就沒法定位到源文件，基本上就是生產環境能用，開發環境不能用，不用進行區分配置了。

12. nosources-source-map

和hidden-source-map同樣也是，開發環境能用，可是會進行映射，而且sourceContents爲空，這樣你在開發環境能看到具體的目錄結構，可是卻看不到任何源碼

總結

1. 帶eval均是同過eval方式處理的，不生成map文件，瀏覽器經過解析eval中的字符串獲得源碼
2. 帶cheap可是不帶module的展現的都是轉換過的代碼，帶有module的是源碼，可是二者都僅限行
3. eval-source-map和source-map之類，沒有cheap和module的是能映射到每個變量名的，debugger也能單行內屢次調試
4. hidden-source-map和nosources-source-map區分生產環境和開發環境，生產環境正常，開發環境或不能顯示，或只能顯示目錄結構

最後爲了方便理解你去理解source map，建議閱讀Source Map原理探究瞭解，明白瀏覽器是怎樣經過mappings找到源碼的位置