source-map：一種提供源代碼到構建后代碼的映射的技術 （如果構建后代碼出錯了，通過映射可以追蹤源代碼錯誤）

參數：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

代碼：

devtool: 'eval-source-map'

可選方案：[生成source-map的位置|給出的錯誤代碼信息]

• source-map：外部，錯誤代碼準確信息 和 源代碼的錯誤位置

• inline-source-map：內聯，只生成一個內聯 source-map，錯誤代碼準確信息 和 源代碼的錯誤位置

• hidden-source-map：外部，錯誤代碼錯誤原因，但是沒有錯誤位置（為了隱藏源代碼），不能追蹤源代碼錯誤，只能提示到構建后代碼的錯誤位置

• eval-source-map：內聯，每一個文件都生成對應的 source-map，都在 eval 中，錯誤代碼準確信息 和 源代碼的錯誤位

• nosources-source-map：外部，錯誤代碼準確信息，但是沒有任何源代碼信息（為了隱藏源代碼）

• cheap-source-map：外部，錯誤代碼準確信息 和 源代碼的錯誤位置，只能把錯誤精確到整行，忽略列

• cheap-module-source-map：外部，錯誤代碼準確信息 和 源代碼的錯誤位置，module 會加入 loader 的 source-map

內聯 和 外部的區別：1. 外部生成了文件，內聯沒有 2. 內聯構建速度更快

開發/生產環境可做的選擇：

開發環境：需要考慮速度快，調試更友好

• 速度快( eval > inline > cheap >... )

• eval-cheap-souce-map

• eval-source-map

• 調試更友好

• souce-map

• cheap-module-souce-map

• cheap-souce-map

最終得出最好的兩種方案 --> eval-source-map（完整度高，內聯速度快） / eval-cheap-module-souce-map（錯誤提示忽略列但是包含其他信息，內聯速度快）

生產環境：需要考慮源代碼要不要隱藏，調試要不要更友好

• 內聯會讓代碼體積變大，所以在生產環境不用內聯

• 隱藏源代碼

• nosources-source-map 全部隱藏
• hidden-source-map 只隱藏源代碼，會提示構建后代碼錯誤信息

最終得出最好的兩種方案 --> source-map（最完整） / cheap-module-souce-map（錯誤提示一整行忽略列）

總結

以上是生活随笔為你收集整理的webpack的source-map的详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。