webpack sourcemap 選項多種模式的一些解釋

有人說 Webpack 難用，緣由是 sourcemap 有 7 種，本文就嘗試解釋下這些選項都是什麼意思，不只如此，本文還會分析如何用最好的姿式使用這些配置。

---

先一項一項來看：

• eval 文檔上解釋的很明白，每一個模塊都封裝到 eval 包裹起來，並在後面添加 //# sourceURL

• source-map 這是最原始的 source-map 實現方式，其實現是打包代碼同時建立一個新的 sourcemap 文件， 並在打包文件的末尾添加 //# sourceURL 註釋行告訴 JS 引擎文件在哪兒

• hidden-source-map 文檔上也說了，就是 soucremap 但沒註釋，沒註釋怎麼找文件呢？貌似只能靠後綴，譬如 xxx/bundle.js 文件，某些引擎會嘗試去找 xxx/bundle.js.map

• inline-source-map 爲每個文件添加 sourcemap 的 DataUrl，注意這裏的文件是打包前的每個文件而不是最後打包出來的，同時這個 DataUrl 是包含一個文件完整 souremap 信息的 Base64 格式化後的字符串，而不是一個 url。

• eval-source-map 這個就是把 eval 的 sourceURL 換成了完整 souremap 信息的 DataUrl

• cheap-source-map 不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

• cheap-module-source-map 不包含列信息，同時 loader 的 sourcemap 也被簡化爲只包含對應行的。最終的 sourcemap 只有一份，它是 webpack 對 loader 生成的 sourcemap 進行簡化，而後再次生成的。

webpack 不只支持這 7 種，並且它們仍是能夠任意組合的，就如文檔所說，你能夠設置 souremap 選項爲 cheap-module-inline-source-map。

---

這麼多模式，到底該用哪一個？

cheap-module-eval-source-map 絕大多數狀況下都會是最好的選擇，這也是下版本 webpack 的默認選項。

相關解釋：

1. 大部分狀況咱們調試並不關心列信息，並且就算 sourcemap 沒有列，有些瀏覽器引擎（例如 v8） 也會給出列信息，因此咱們使用 cheap 模式能夠大幅提升 souremap 生成的效率。

2. 使用 eval 方式可大幅提升持續構建效率，參考 webapck devtool 文檔 下方速度對比表格，這對常常須要邊改邊調的前端開發而言，很是重要！

3. 使用 module 可支持 babel 這種預編譯工具（在 webpack 裏作爲 loader 使用）。

4. eval-source-map 使用 DataUrl 自己包含完整 sourcemap 信息，並不須要像 sourceURL 那樣，瀏覽器須要發送一個完整請求去獲取 sourcemap 文件，這會略微提升點效率

---

現實很殘忍

大部分瀏覽器對於 sourcemap 的支持都很是有限，支持最好的 V8 也僅限於在 debugger 裏面支持 sourcemap，對於錯誤的調用棧，咱們看到的結果仍是各類指向 bundle.js (除非是使用 eval + sourceURL 的方式)。

因此我作了 stack-source-map 這個項目，它能讓 Chrome 的 error stack 支持全部的 webpack 打包模式，這樣測試工具報錯時，你就能第一時間找到錯誤處，後續還在考慮支持 vim 的 quickfix 列表，這樣一旦出錯，開發者就能夠直接在編輯器內跳轉到錯誤代碼處。

若是您發現這個工具備什麼問題，歡迎任何形式 反饋

---

其實只要你瞭解 sourcemap 相關知識就會發現官方文檔並不難懂，只是表述的比較簡約，並且正是由於有了靈活的配置方式，咱們才能在不一樣場景下得到最佳的效果。

本文同步發佈與 [https://chemzqm.me/webpack-sourcemap/]