https://www.cnblogs.com/hhhyaaon/p/5657469.html
eval
每個(gè)模塊被轉(zhuǎn)化為字符串，在尾部添加//# souceURL（指明eval前文件）后，被eval包裹起來
source-map
最原始的source-map實(shí)現(xiàn)方式帮坚，打包代碼的同時(shí)生成一個(gè)sourcemap文件瓷耙，并在打包文件的末尾添加//# souceURL舵鳞，注釋會(huì)告訴JS引擎原始文件位置
hidden-source-map
打包結(jié)果與source-map一致理肺，但是.map文件結(jié)尾不顯示//# sourceMappingURL
inline-source-map
為打包前的每個(gè)文件添加sourcemap的dataUrl乃摹，追加到打包后文件內(nèi)容的結(jié)尾免糕；此處赢乓，dataUrl包含一個(gè)文件完整 souremap 信息的 Base64 格式化后的字符串
eval-source-map
將每個(gè)模塊轉(zhuǎn)化為字符串，使用eval包裹石窑，并將打包前每個(gè)模塊的sourcemap信息轉(zhuǎn)換為Base64編碼牌芋，拼接在每個(gè)打包后文件的結(jié)尾
cheap-source-map
同source-map,但不包含列信息，不包含 loader 的 sourcemap松逊，（譬如 babel 的 sourcemap）
cheap-module-source-map
不包含列信息姜贡，同時(shí) loader 的 sourcemap 也被簡化為只包含對應(yīng)行的。最終的 sourcemap 只有一份棺棵，它是 webpack 對 loader 生成的 sourcemap 進(jìn)行簡化楼咳，然后再次生成的
這么多模式熄捍，到底使用哪個(gè)？
開發(fā)環(huán)境推薦：
cheap-module-eval-source-map
生產(chǎn)環(huán)境推薦：
cheap-module-source-map
相關(guān)解釋：
大部分情況我們調(diào)試并不關(guān)心列信息母怜，而且就算 sourcemap 沒有列余耽，有些瀏覽器引擎（例如 v8） 也會(huì)給出列信息，所以我們使用 cheap 模式可以大幅提高 souremap 生成的效率苹熏。
使用 module 可支持 babel 這種預(yù)編譯工具（在 webpack 里做為 loader 使用）碟贾。
使用 eval 方式可大幅提高持續(xù)構(gòu)建效率，參考webapck devtool速度對比列表轨域，這對經(jīng)常需要邊改邊調(diào)的前端開發(fā)而言非常重要
[圖片上傳失敗...(image-1e848d-1648565075712)]直接將sourceMap放入打包后的文件袱耽，會(huì)明顯增大文件的大小，不利于靜態(tài)文件的快速加載干发；而外聯(lián).map時(shí)朱巨，.map文件只會(huì)在F12開啟時(shí)進(jìn)行下載（sourceMap主要服務(wù)于調(diào)試），故推薦使用外聯(lián).map的形式枉长。
相關(guān)閱讀
webpack sourcemap 選項(xiàng)多種模式的一些解釋
webpack 官方文檔（devtool）
JavaScript Source Map 詳解
