eval - 每個(gè)模塊都使用 eval() 執(zhí)行，并且都有 //@ sourceURL。此選項(xiàng)會非常快地構(gòu)建。主要缺點(diǎn)是，由于會映射到轉(zhuǎn)換后的代碼，而不是映射到原始代碼（沒有從 loader 中獲取 source map），所以不能正確的顯示行數(shù)。

/** ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").* This devtool is neither made for production nor for readable output files.* It uses "eval()" calls to create a separate source file in the browser devtools.* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)* or disable the default devtool with "devtool: false".* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).*/ /******/ (() => { // webpackBootstrap /*!**********************!*\!*** ./src/index.js ***!\**********************/ eval("console.log('hello world')\n\n//# sourceURL=webpack://webpack5/./src/index.js?"); /******/ })() ;

只是給了個(gè)代碼路徑，并不能映射行和列，不會產(chǎn)生新文件。

eval-source-map - 每個(gè)模塊使用 eval() 執(zhí)行，并且 source map 轉(zhuǎn)換為 DataUrl 后添加到 eval() 中。初始化 source map 時(shí)比較慢，但是會在重新構(gòu)建時(shí)提供比較快的速度，并且生成實(shí)際的文件。行數(shù)能夠正確映射，因?yàn)闀成涞皆即a中。它會生成用于開發(fā)環(huán)境的最佳品質(zhì)的 source map。

/** ATTENTION: An "eval-source-map" devtool has been used.* This devtool is neither made for production nor for readable output files.* It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)* or disable the default devtool with "devtool: false".* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).*/ /******/ (() => { // webpackBootstrap /*!**********************!*\!*** ./src/index.js ***!\**********************/ eval("console.log('hello world')//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly93ZWJwYWNrNS8uL3NyYy9pbmRleC5qcz9iNjM1Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6Ii4vc3JjL2luZGV4LmpzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coJ2hlbGxvIHdvcmxkJykiXSwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./src/index.js\n"); /******/ })() ;

可以映射行和列，不會產(chǎn)生新文件。

eval-cheap-source-map - 類似 eval-source-map，每個(gè)模塊使用 eval() 執(zhí)行。這是 “cheap(低開銷)” 的 source map，因?yàn)樗鼪]有生成列映射(column mapping)，只是映射行數(shù)。它會忽略源自 loader 的 source map，并且僅顯示轉(zhuǎn)譯后的代碼，就像 eval devtool。

可以映射行，沒有列，如果中間經(jīng)歷了loader處理，只能映射到轉(zhuǎn)換后的代碼。不會產(chǎn)生新文件。

eval-cheap-module-source-map - 類似 eval-cheap-source-map，并且，在這種情況下，源自 loader 的 source map 會得到更好的處理結(jié)果。然而，loader source map 會被簡化為每行一個(gè)映射(mapping)。

可以映射行，沒有列，如果中間經(jīng)歷了loader處理，能映射到轉(zhuǎn)換前的代碼，也就是源碼列。不會產(chǎn)生新文件。

source-mapcheap-source-map

生成實(shí)際的文件	不生成實(shí)際的文件
行數(shù)能夠正確映射	生成列映射，只是映射行數(shù)
會映射到原始代碼中	僅顯示轉(zhuǎn)譯后的代碼

eval-cheap-module-source-map 比 eval-cheap-source-map 更好

說明：僅顯示轉(zhuǎn)譯后的代碼，表示ES6轉(zhuǎn)換ES5的代碼中，只能映射到ES5，不能映射到ES6，但是中間經(jīng)歷了loader的處理，如果要正確映射到ES6，我們可以使用eval-cheap-module-source-map。

特定場景

以下選項(xiàng)對于開發(fā)環(huán)境和生產(chǎn)環(huán)境并不理想。他們是一些特定場景下需要的，例如，針對一些第三方工具。

inline-source-map - source map 轉(zhuǎn)換為 DataUrl 后添加到 bundle 中。

cheap-source-map - 沒有列映射(column mapping)的 source map，忽略 loader source map。

inline-cheap-source-map - 類似 cheap-source-map，但是 source map 轉(zhuǎn)換為 DataUrl 后添加到 bundle 中。

cheap-module-source-map - 沒有列映射(column mapping)的 source map，將 loader source map 簡化為每行一個(gè)映射(mapping)。

inline-cheap-module-source-map - 類似 cheap-module-source-map，但是 source mapp 轉(zhuǎn)換為 DataUrl 添加到 bundle 中。

inline的意思就是說，我們source-map會生成單獨(dú)的文件，但是為了不生成單獨(dú)文件，通過將生成的內(nèi)容base64轉(zhuǎn)換了，把內(nèi)容內(nèi)嵌到bundle中了，不會產(chǎn)生單獨(dú)的文件。

重點(diǎn)關(guān)注

1、添加到 eval() 中
2、添加到 bundle 中

eval性能較好，因?yàn)榭梢愿鶕?jù)文件進(jìn)行緩存。所以最后推薦大家在開發(fā)環(huán)境中使用的配置是：eval-source-map，不要在生產(chǎn)環(huán)境使用！！！如何需要更快速度并且只需要行信息不要列信息，你甚至可以使用eval-cheap-module-source-map

總結(jié)

以上是生活随笔為你收集整理的source-map的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。