webpack的source-map的詳解

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 >... )
  1. eval-cheap-souce-map
  2. eval-source-map
• 調試更友好
  1. souce-map
  2. cheap-module-souce-map
  3. cheap-souce-map

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

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

• 内聯會讓代碼體積變大，是以在生産環境不用内聯
• 隐藏源代碼
  1. nosources-source-map 全部隐藏
  2. hidden-source-map 隻隐藏源代碼，會提示建構後代碼錯誤資訊

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