前端發展到現階段，很多時候都不會直接運作源代碼，可能需要對源代碼進行合并、壓縮、轉換等操作，真正運作的是轉換後的代碼。
如下圖：
這就給調試帶來了困難，因為當運作發生錯誤的時候，我們更加希望能看到源代碼中的錯誤，而不是轉換後代碼的錯誤。
為了解決這一問題，chrome浏覽器率先支援了source map，其他浏覽器紛紛效仿，
目前，幾乎所有新版浏覽器都支援了source map。
source map實際上是一個配置，配置中不僅記錄了所有源碼内容，還記錄了和轉換後的代碼的對應關系。下圖是浏覽器處理source map的原理：
：
1. source map 應在開發環境中使用，作為一種調試手段。 2. source map 不應該在生産環境中使用，source map的檔案一般較大，不僅會導緻額外的網絡傳輸，還容易暴露原始代碼。即便要在生産環境中使用source map，用于調試真實的代碼運作問題，也要做出一些處理規避網絡傳輸和代碼暴露的問題。 webpack中的source map：使用 webpack 編譯後的代碼難以調試，可以通過 devtool 配置來
**優化調試體驗**。devtool 的其它配置
官方網站：https://www.webpackjs.com/configuration/devtool/
1、開發環境的配置：- eval：
每個子產品都使用
eval()
執行，并且都有
//@ sourceURL
。此選項會非常快地建構。主要缺點是，由于會映射到轉換後的代碼，而不是映射到原始代碼（沒有從 loader 中擷取 source map），是以不能正确的顯示行數。
- eval-source-map：
每個子產品使用
eval()
執行，并且 source map 轉換為 DataUrl 後添加到
eval()
中。初始化 source map 時比較慢，但是會在重新建構時提供比較快的速度，并且生成實際的檔案。行數能夠正确映射，因為會映射到原始代碼中。
它會生成用于開發環境的最佳品質的 source map。- cheap-eval-source-map：
類似
eval-source-map
，每個子產品使用
eval()
執行。這是 "cheap(低開銷)" 的 source map，因為它沒有生成列映射(column mapping)，隻是映射行數。它會忽略源自 loader 的 source map，并且僅顯示轉譯後的代碼，就像
eval
devtool。
- cheap-module-eval-source-map：
類似
cheap-eval-source-map
，并且，在這種情況下，源自 loader 的 source map 會得到更好的處理結果。然而，loader source map 會被簡化為每行一個映射(mapping)。
2、生産環境的配置：- none：
（省略
devtool
選項）不生成 source map。這是一個不錯的選擇。
- source-map：
整個 source map 作為一個單獨的檔案生成。它為 bundle 添加了一個引用注釋，以便開發工具知道在哪裡可以找到它。
- hidden-source-map：
與
source-map
相同，但不會為 bundle 添加引用注釋。如果你隻想 source map 映射那些源自錯誤報告的錯誤堆棧跟蹤資訊，但不想為浏覽器開發工具暴露你的 source map，這個選項會很有用。
- nosources-source-map：
建立的 source map 不包含
sourcesContent(源代碼内容)
。它可以用來映射用戶端上的堆棧跟蹤，而無須暴露所有的源代碼。你可以将 source map 檔案部署到 web 伺服器。