[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 詳解