• eval 文檔上解釋的很明白，每個(gè)模塊都封裝到 eval 包裹起來(lái)，并在后面添加 //# sourceURL

• source-map 這是最原始的 source-map 實(shí)現(xiàn)方式，其實(shí)現(xiàn)是打包代碼同時(shí)創(chuàng)建一個(gè)新的 sourcemap 文件， 并在打包文件的末尾添加 //# sourceURL注釋行告訴 JS 引擎文件在哪兒

• hidden-source-map 文檔上也說(shuō)了，就是 soucremap 但沒(méi)注釋，沒(méi)注釋怎么找文件呢？貌似只能靠后綴，譬如 xxx/bundle.js 文件，某些引擎會(huì)嘗試去找 xxx/bundle.js.map

• inline-source-map 為每一個(gè)文件添加 sourcemap 的 DataUrl，注意這里的文件是打包前的每一個(gè)文件而不是最后打包出來(lái)的，同時(shí)這個(gè) DataUrl 是包含一個(gè)文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一個(gè) url。

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

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

• cheap-module-source-map 不包含列信息，同時(shí) loader 的 sourcemap 也被簡(jiǎn)化為只包含對(duì)應(yīng)行的。最終的 sourcemap 只有一份，它是 webpack 對(duì) loader 生成的 sourcemap 進(jìn)行簡(jiǎn)化，然后再次生成的。

webpack 不僅支持這 7 種，而且它們還是可以任意組合的，就如文檔所說(shuō)，你可以設(shè)置 souremap 選項(xiàng)為 cheap-module-inline-source-map。

這么多模式，到底該用哪個(gè)？

cheap-module-eval-source-map 絕大多數(shù)情況下都會(huì)是最好的選擇，這也是下版本 webpack 的默認(rèn)選項(xiàng)。

相關(guān)解釋：

1. 大部分情況我們調(diào)試并不關(guān)心列信息，而且就算 sourcemap 沒(méi)有列，有些瀏覽器引擎（例如 v8） 也會(huì)給出列信息，所以我們使用 cheap 模式可以大幅提高 souremap 生成的效率。

2. 使用 eval 方式可大幅提高持續(xù)構(gòu)建效率，參考 webapck devtool 文檔 下方速度對(duì)比表格，這對(duì)經(jīng)常需要邊改邊調(diào)的前端開發(fā)而言，非常重要！

3. 使用 module 可支持 babel 這種預(yù)編譯工具（在 webpack 里做為 loader 使用）。

4. eval-source-map 使用 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那樣，瀏覽器需要發(fā)送一個(gè)完整請(qǐng)求去獲取 sourcemap 文件，這會(huì)略微提高點(diǎn)效率

大部分瀏覽器對(duì)于 sourcemap 的支持都非常有限，支持最好的 V8 也僅限于在 debugger 里面支持 sourcemap，對(duì)于錯(cuò)誤的調(diào)用棧，我們看到的結(jié)果還是各種指向 bundle.js (除非是使用 eval + sourceURL 的方式)。

可以參考[https://www.cnblogs.com/wangyingblog/p/7027540.html]
[https://www.cnblogs.com/skychx/p/webpack-sourse-map-eval-cheap-inline-module.html]