eval

每個模塊被轉(zhuǎn)化為字符串，在尾部添加//# souceURL（指明eval前文件）后，被eval包裹起來

source-map

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

打包結(jié)果與source-map一致，但是.map文件結(jié)尾不顯示//# sourceMappingURL

為打包前的每個文件添加sourcemap的dataUrl，追加到打包后文件內(nèi)容的結(jié)尾；此處，dataUrl包含一個文件完整 souremap 信息的 Base64 格式化后的字符串

將每個模塊轉(zhuǎn)化為字符串，使用eval包裹，并將打包前每個模塊的sourcemap信息轉(zhuǎn)換為Base64編碼，拼接在每個打包后文件的結(jié)尾

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

不包含列信息，同時 loader 的 sourcemap 也被簡化為只包含對應(yīng)行的。最終的 sourcemap 只有一份，它是 webpack 對 loader 生成的 sourcemap 進行簡化，然后再次生成的

開發(fā)環(huán)境推薦：
cheap-module-eval-source-map
生產(chǎn)環(huán)境推薦：
cheap-module-source-map

相關(guān)解釋：

大部分情況我們調(diào)試并不關(guān)心列信息，而且就算 sourcemap 沒有列，有些瀏覽器引擎（例如 v8）也會給出列信息，所以我們使用 cheap 模式可以大幅提高 souremap 生成的效率。
使用 module 可支持 babel 這種預(yù)編譯工具（在 webpack 里做為 loader 使用）。
使用 eval 方式可大幅提高持續(xù)構(gòu)建效率，參考webapck devtool速度對比列表，這對經(jīng)常需要邊改邊調(diào)的前端開發(fā)而言非常重要
[圖片上傳失敗...(image-1e848d-1648565075712)]
直接將sourceMap放入打包后的文件，會明顯增大文件的大小，不利于靜態(tài)文件的快速加載；而外聯(lián).map時，.map文件只會在F12開啟時進行下載（sourceMap主要服務(wù)于調(diào)試），故推薦使用外聯(lián).map的形式。