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

參數(shù)：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

代碼：

devtool: 'eval-source-map'

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

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

• inline-source-map：內(nèi)聯(lián)，只生成一個內(nèi)聯(lián) source-map，錯誤代碼準(zhǔn)確信息 和 源代碼的錯誤位置

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

• eval-source-map：內(nèi)聯(lián)，每一個文件都生成對應(yīng)的 source-map，都在 eval 中，錯誤代碼準(zhǔn)確信息 和 源代碼的錯誤位

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

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

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

內(nèi)聯(lián) 和 外部的區(qū)別：1. 外部生成了文件，內(nèi)聯(lián)沒有 2. 內(nèi)聯(lián)構(gòu)建速度更快

開發(fā)/生產(chǎn)環(huán)境可做的選擇：

開發(fā)環(huán)境：需要考慮速度快，調(diào)試更友好

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

• eval-cheap-souce-map

• eval-source-map

• 調(diào)試更友好

• souce-map

• cheap-module-souce-map

• cheap-souce-map

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

生產(chǎn)環(huán)境：需要考慮源代碼要不要隱藏，調(diào)試要不要更友好

• 內(nèi)聯(lián)會讓代碼體積變大，所以在生產(chǎn)環(huán)境不用內(nèi)聯(lián)

• 隱藏源代碼

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。