webpack sourcemap 精簡說明

對於一個 webpack 構建的項目，source-map 對於開發調試，打包速度仍是影響很大的，可是 webpack 的官方說明卻不那麼清晰易懂，也沒有找到很精簡的說明文章，索性本身嘗試下全部的參數，概述一下本身的理解。

有興趣的同窗能夠自行建立一個簡單的 webpack 項目，切換參數嘗試下，會更容易理解

注意嘗試的時候，要把webpack mode設置爲none, webpack4 mode 爲 development和production時會有額外的行爲

首先看下官網的那張說明圖：

看上去是否是很煩！！其實抽離出其中的關鍵字，理解每一個關鍵字的作了什麼，起到什麼做用，剩下的就是彼此間的組合了。

eval => 提高 rebuild 速度

eval 的做用是使得打包後的 bundle 文件中每一個模塊代碼使用 eval 去執行，會保留每一個模塊的 eval 形式的文件，即使是指定了eval-source-map,仍然會在瀏覽器開發者工具中生成 webpack-internals:// 文件夾來保存一份裏面是eval形式的模塊文件。如圖：

猜想這樣作的目的：由於 eval 中爲字符串形式，因此當源碼變更的時候進行字符串處理會提高 rebuild 的速度，因此能夠看到圖表中全部帶有 eval 的選項，rebuild 速度都很快。

所以 eval 的關鍵字就是 rebuild

source-map => 額…… source-map

這個貌似不須要說明，就是指定了這個關鍵字纔會真正的進行 source-map 生成，生成 .map 文件, 會在 bundle 文件末尾追加 sourceURI= 指定 .map 文件路徑，會在瀏覽器開發者工具中看到webpack://的文件夾

inline => dataURI

正常的source-map 的生成是在dist 目錄下建立一個 .map 文件， inline 的含義就是不產生獨立的 .map 文件，而把 source-map 的內容以 dataURI的方式追加到 bundle 件末尾，入股：

至於什麼是 dataURI，請自行google ~~

因此 inline 的關鍵字是 dataURI

cheap => lines-only

cheap 的含義是忽略列信息，能夠看到圖表中全部帶有 cheap 的說明中都有 lines-only.

忽略列信息的意思就是出了問題只能定位到某一行，不能定位到這行的哪一列， cheap 主要是爲了提高打包速度，很好理解嘛，只關注行，不關注列，生成map的速度確定快啊~~

因此 cheap 的關鍵字就是lines-only

module => loader

module 的做用是 map 到 loader 處理前的文件，若是不加 module, 其實是 map 到源文件通過對應 loader 處理後的樣子。這個須要 loader 的支持

因此 module 的關鍵字是 loader

最下面的兩個選項

hidden-source-map

就是不在 bundle 文件結尾處追加 sourceURL 指定其 sourcemap文件的位置，可是仍然會生成 sourcemap 文件。這樣，瀏覽器開發者工具就沒法應用sourcemap, 目的是避免把sourcemap文件發佈到生產環境，形成源碼泄露。

生產環境應該用錯誤報告工具結合 sourcemap 文件來查找問題

nosources-source-map

sourcemap 中不帶有源碼，這樣，sourcemap 能夠部署到生產環境而不會形成源碼泄露，同時一旦出了問題，error stacks 中會顯示準確的錯誤信息，好比發生在哪一個源文件的哪一行，如圖：

總結

以上全部關鍵字說明完畢，而後再去看官網的說明，會容易理解的多。何時用哪一個選相也能夠自行思考了。

本文僅從使用的角度來理解 sourcemap, 想要詳細瞭解 sourcemap 原理的可自行搜索，如阮老師的 JavaScript Source Map 詳解

最後附上主要關鍵字對應方便記憶：

• evel => rebuild
• inline => dataURI
• cheap => lines-only
• module => loader