什么是SourceMap?
當我們對項目進行打包時,經過一系列編譯和轉換,最終會形成生產環境的項目代碼,並將此部署至線上。眾所周知,生產環境代碼和打包后的代碼千差萬別,當構建后的代碼報錯,如果沒有SourceMap,很難將錯誤溯源至源代碼,這對開發很不友好
SourceMap形成了源代碼和構建后代碼的映射關系，比如打包后產生的.map文件(eg:test.js.map)即為SourceMap文件。
示范
沒有使用sourcemap:
配置了sourcemap之后:
在webpack.config.js中配置
詳細參考官方文檔https://webpack.docschina.org/configuration/devtool/#root
devtool:'source-map' //字符串的順序模式是： [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
對於開發環境
以下選項非常適合開發環境：
-
eval - 每個模塊都使用 eval() 執行，並且都有 //@ sourceURL。此選項會非常快地構建。主要缺點是，由於會映射到轉換后的代碼，而不是映射到原始代碼，所以不能正確的顯示行數。
-
eval-source-map - 每個模塊使用 eval() 執行，並且 source map 轉換為 DataUrl 后添加到 eval() 中。初始化 source map 時比較慢，但是會在重新構建時提供比較快的速度，並且生成實際的文件。行數能夠正確映射，因為會映射到原始代碼中。它會生成用於開發環境的最佳品質的 source map。
-
eval-cheap-source-map - 類似 eval-source-map，每個模塊使用 eval() 執行。這是 "cheap" 的 source map，因為它沒有生成列映射，只是映射行數。
-
eval-cheap-module-source-map - 類似 eval-cheap-source-map，並且，在這種情況下，源自 loader 的 source map 會得到更好的處理結果。然而，loader source map 會被簡化為每行一個映射(mapping)。
特定場景
以下選項對於開發環境和生產環境並不理想。他們是一些特定場景下需要的，例如，針對一些第三方工具。
-
inline-source-map - source map 轉換為 DataUrl 后添加到 bundle 中。
-
cheap-source-map - 沒有列映射(column mapping)的 source map，忽略 loader source map。
-
inline-cheap-source-map - 類似 cheap-source-map，但是 source map 轉換為 DataUrl 后添加到 bundle 中。
-
cheap-module-source-map - 沒有列映射(column mapping)的 source map，將 loader source map 簡化為每行一個映射(mapping)。
-
inline-cheap-module-source-map - 類似 cheap-module-source-map，但是 source mapp 轉換為 DataUrl 添加到 bundle 中。
對於生產環境
這些選項通常用於生產環境中：
-
(none)（省略 devtool 選項） - 不生成 source map。這是一個不錯的選擇。
-
source-map - 整個 source map 作為一個單獨的文件生成。它為 bundle 添加了一個引用注釋，以便開發工具知道在哪里可以找到它。
-
hidden-source-map - 與 source-map 相同，但不會為 bundle 添加引用注釋。如果你只想 source map 映射那些源自錯誤報告的錯誤堆棧跟蹤信息，但不想為瀏覽器開發工具暴露 source map，這個選項會很有用
-
nosources-source-map - 創建的 source map 不包含源代碼內容。它可以用來映射客戶端上的堆棧跟蹤，而無須暴露所有的源代碼。可以將 source map 文件部署到 web 服務器。