[webpack] devtool配置對比

文件結構

• -src
  • -views
    • -essay
      • -list.js
      • -detail.js
  • -index.js
• -webpack.config.js

文件內容

[/src/.../index.js]

import * as list from "./views/essay/list.js"
import * as detail from "./views/essay/detail.js"

[/src/.../list.js]

export function getName(){
    console.log("list");
}

[/src/.../detail.js]

export function getName(){
    console.log("detail");
}

輸入輸出

結果

eval

每一個模塊被轉化爲字符串，在尾部添加//# souceURL（指明eval前文件）後，被eval包裹起來

[打包信息]

[/dist/app.js]

source-map

最原始的source-map實現方式，打包代碼的同時生成一個sourcemap文件，並在打包文件的末尾添加//# souceURL，註釋會告訴JS引擎原始文件位置

[打包信息]

[/dist/app.js]

hidden-source-map

打包結果與source-map一致，可是.map文件結尾不顯示//# sourceMappingURL

[打包信息]

[/dist/app.js]

inline-source-map

爲打包前的每一個文件添加sourcemap的dataUrl，追加到打包後文件內容的結尾；此處，dataUrl包含一個文件完整 souremap 信息的 Base64 格式化後的字符串

[打包信息]

[/dist/app.js]

eval-source-map

將每一個模塊轉化爲字符串，使用eval包裹，並將打包前每一個模塊的sourcemap信息轉換爲Base64編碼，拼接在每一個打包後文件的結尾

[打包信息]

[/dist/app.js]

cheap-source-map

同source-map,但不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

[打包信息]

[/dist/app.js]

cheap-module-source-map

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

[打包信息]

[/dist/app.js]

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

開發環境推薦：
cheap-module-eval-source-map
生產環境推薦：
cheap-module-source-map

相關解釋：

• 大部分狀況咱們調試並不關心列信息，並且就算 sourcemap 沒有列，有些瀏覽器引擎（例如 v8） 也會給出列信息，因此咱們使用 cheap 模式能夠大幅提升 souremap 生成的效率。
• 使用 module 可支持 babel 這種預編譯工具（在 webpack 裏作爲 loader 使用）。

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

• 直接將sourceMap放入打包後的文件，會明顯增大文件的大小，不利於靜態文件的快速加載；而外聯.map時，.map文件只會在F12開啓時進行下載（sourceMap主要服務於調試），故推薦使用外聯.map的形式。

相關閱讀

webpack sourcemap 選項多種模式的一些解釋
webpack 官方文檔（devtool）
JavaScript Source Map 詳解