Webpack Devtool
此選項(xiàng)控制是否生成，以及如何生成 source map。
使用 SourceMapDevToolPlugin 進(jìn)行更細(xì)粒度的配置。查看 source-map-loader 來(lái)處理已有的 source map。
devtool
?string = 'eval' false?
選擇一種 source map 風(fēng)格來(lái)增強(qiáng)調(diào)試過(guò)程。不同的值會(huì)明顯影響到構(gòu)建(build)和重新構(gòu)建(rebuild)的速度。
| devtool | performance | production | quality | comment |
|---|---|---|---|---|
| (none) | build: fastest
rebuild: fastest |
yes | bundle | Recommended choice for production builds with maximum performance. |
eval
|
build: fast
rebuild: fastest |
no | generated | Recommended choice for development builds with maximum performance. |
eval-cheap-source-map
|
build: ok
rebuild: fast |
no | transformed | Tradeoff choice for development builds. |
eval-cheap-module-source-map
|
build: slow
rebuild: fast |
no | original lines | Tradeoff choice for development builds. |
eval-source-map
|
build: slowest
rebuild: ok |
no | original | Recommended choice for development builds with high quality SourceMaps. |
cheap-source-map
|
build: ok
rebuild: slow |
no | transformed | |
cheap-module-source-map
|
build: slow
rebuild: slow |
no | original lines | |
source-map
|
build: slowest
rebuild: slowest |
yes | original | Recommended choice for production builds with high quality SourceMaps. |
inline-cheap-source-map
|
build: ok
rebuild: slow |
no | transformed | |
inline-cheap-module-source-map
|
build: slow
rebuild: slow |
no | original lines | |
inline-source-map
|
build: slowest
rebuild: slowest |
no | original | Possible choice when publishing a single file |
eval-nosources-cheap-source-map
|
build: ok
rebuild: fast |
no | transformed | source code not included |
eval-nosources-cheap-module-source-map
|
build: slow
rebuild: fast |
no | original lines | source code not included |
eval-nosources-source-map
|
build: slowest
rebuild: ok |
no | original | source code not included |
inline-nosources-cheap-source-map
|
build: ok
rebuild: slow |
no | transformed | source code not included |
inline-nosources-cheap-module-source-map
|
build: slow
rebuild: slow |
no | original lines | source code not included |
inline-nosources-source-map
|
build: slowest
rebuild: slowest |
no | original | source code not included |
nosources-cheap-source-map
|
build: ok
rebuild: slow |
no | transformed | source code not included |
nosources-cheap-module-source-map
|
build: slow
rebuild: slow |
no | original lines | source code not included |
nosources-source-map
|
build: slowest
rebuild: slowest |
yes | original | source code not included |
hidden-nosources-cheap-source-map
|
build: ok
rebuild: slow |
no | transformed | no reference, source code not included |
hidden-nosources-cheap-module-source-map
|
build: slow
rebuild: slow |
no | original lines | no reference, source code not included |
hidden-nosources-source-map
|
build: slowest
rebuild: slowest |
yes | original | no reference, source code not included |
hidden-cheap-source-map
|
build: ok
rebuild: slow |
no | transformed | no reference |
hidden-cheap-module-source-map
|
build: slow
rebuild: slow |
no | original lines | no reference |
hidden-source-map
|
build: slowest
rebuild: slowest |
yes | original | no reference. Possible choice when using SourceMap only for error reporting purposes. |
| shortcut | explanation |
|---|---|
| performance: build | How is the performance of the initial build affected by the devtool setting? |
| performance: rebuild | How is the performance of the incremental build affected by the devtool setting? Slow devtools might reduce development feedback loop in watch mode. The scale is different compared to the build performance, as one would expect rebuilds to be faster than builds. |
| production | Does it make sense to use this devtool for production builds? It's usually no when the devtool has a negative effect on user experience. |
| quality: bundled | You will see all generated code of a chunk in a single blob of code. This is the raw output file without any devtooling support |
| quality: generated | You will see the generated code, but each module is shown as separate code file in browser devtools. |
| quality: transformed | You will see generated code after the preprocessing by loaders but before additional webpack transformations. Only source lines will be mapped and column information will be discarded resp. not generated. This prevents setting breakpoints in the middle of lines which doesn't work together with minimizer. |
| quality: original lines | You will see the original code that you wrote, assuming all loaders support SourceMapping. Only source lines will be mapped and column information will be discarded resp. not generated. This prevents setting breakpoints in the middle of lines which doesn't work together with minimizer. |
| quality: original | You will see the original code that you wrote, assuming all loaders support SourceMapping. |
eval-* addition |
generate SourceMap per module and attach it via eval. Recommended for development, because of improved rebuild performance. Note that there is a windows defender issue, which causes huge slowdown due to virus scanning. |
inline-* addition |
inline the SourceMap to the original file instead of creating a separate file. |
hidden-* addition |
no reference to the SourceMap added. When SourceMap is not deployed, but should still be generated, e. g. for error reporting purposes. |
nosources-* addition |
source code is not included in SourceMap. This can be useful when the original files should be referenced (further config options needed). |
品質(zhì)說(shuō)明(quality)
打包后的代碼 - 將所有生成的代碼視為一大塊代碼。你看不到相互分離的模塊。
生成后的代碼 - 每個(gè)模塊相互分離，并用模塊名稱進(jìn)行注釋?？梢钥吹?webpack 生成的代碼。示例：你會(huì)看到類似 var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();，而不是 import {test} from "module"; test();。
轉(zhuǎn)換過(guò)的代碼 - 每個(gè)模塊相互分離，并用模塊名稱進(jìn)行注釋?？梢钥吹?webpack 轉(zhuǎn)換前、loader 轉(zhuǎn)譯后的代碼。示例：你會(huì)看到類似 import {test} from "module"; var A = function(_test) { ... }(test);，而不是 import {test} from "module"; class A extends test {}。
原始源代碼 - 每個(gè)模塊相互分離，并用模塊名稱進(jìn)行注釋。你會(huì)看到轉(zhuǎn)譯之前的代碼，正如編寫(xiě)它時(shí)。這取決于 loader 支持。
無(wú)源代碼內(nèi)容 - source map 中不包含源代碼內(nèi)容。瀏覽器通常會(huì)嘗試從 web 服務(wù)器或文件系統(tǒng)加載源代碼。你必須確保正確設(shè)置 output.devtoolModuleFilenameTemplate，以匹配源代碼的 url。
（僅限行） - source map 被簡(jiǎn)化為每行一個(gè)映射。這通常意味著每個(gè)語(yǔ)句只有一個(gè)映射（假設(shè)你使用這種方式）。這會(huì)妨礙你在語(yǔ)句級(jí)別上調(diào)試執(zhí)行，也會(huì)妨礙你在每行的一些列上設(shè)置斷點(diǎn)。與壓縮后的代碼組合后，映射關(guān)系是不可能實(shí)現(xiàn)的，因?yàn)閴嚎s工具通常只會(huì)輸出一行。
對(duì)于開(kāi)發(fā)環(huán)境
以下選項(xiàng)非常適合開(kāi)發(fā)環(huán)境：
?eval? - 每個(gè)模塊都使用 eval() 執(zhí)行，并且都有 //# sourceURL。此選項(xiàng)會(huì)非?？斓貥?gòu)建。主要缺點(diǎn)是，由于會(huì)映射到轉(zhuǎn)換后的代碼，而不是映射到原始代碼（沒(méi)有從 loader 中獲取 source map），所以不能正確的顯示行數(shù)。
?eval-source-map? - 每個(gè)模塊使用 eval() 執(zhí)行，并且 source map 轉(zhuǎn)換為 DataUrl 后添加到 eval() 中。初始化 source map 時(shí)比較慢，但是會(huì)在重新構(gòu)建時(shí)提供比較快的速度，并且生成實(shí)際的文件。行數(shù)能夠正確映射，因?yàn)闀?huì)映射到原始代碼中。它會(huì)生成用于開(kāi)發(fā)環(huán)境的最佳品質(zhì)的 source map。
?eval-cheap-source-map? - 類似 ?eval-source-map?，每個(gè)模塊使用 eval() 執(zhí)行。這是 "cheap(低開(kāi)銷)" 的 source map，因?yàn)樗鼪](méi)有生成列映射(column mapping)，只是映射行數(shù)。它會(huì)忽略源自 loader 的 source map，并且僅顯示轉(zhuǎn)譯后的代碼，就像 eval devtool。
?eval-cheap-module-source-map? - 類似 ?eval-cheap-source-map?，并且，在這種情況下，源自 loader 的 source map 會(huì)得到更好的處理結(jié)果。然而，loader source map 會(huì)被簡(jiǎn)化為每行一個(gè)映射(mapping)。
特定場(chǎng)景
以下選項(xiàng)對(duì)于開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境并不理想。他們是一些特定場(chǎng)景下需要的，例如，針對(duì)一些第三方工具。
?inline-source-map? - source map 轉(zhuǎn)換為 DataUrl 后添加到 bundle 中。
?cheap-source-map? - 沒(méi)有列映射(column mapping)的 source map，忽略 loader source map。
?inline-cheap-source-map? - 類似 cheap-source-map，但是 source map 轉(zhuǎn)換為 DataUrl 后添加到 bundle 中。
?cheap-module-source-map? - 沒(méi)有列映射(column mapping)的 source map，將 loader source map 簡(jiǎn)化為每行一個(gè)映射(mapping)。
?inline-cheap-module-source-map? - 類似 cheap-module-source-map，但是 source mapp 轉(zhuǎn)換為 DataUrl 添加到 bundle 中。
對(duì)于生產(chǎn)環(huán)境
這些選項(xiàng)通常用于生產(chǎn)環(huán)境中：
(none)（省略 devtool 選項(xiàng)） - 不生成 source map。這是一個(gè)不錯(cuò)的選擇。
source-map - 整個(gè) source map 作為一個(gè)單獨(dú)的文件生成。它為 bundle 添加了一個(gè)引用注釋，以便開(kāi)發(fā)工具知道在哪里可以找到它。
?hidden-source-map? - 與 source-map 相同，但不會(huì)為 bundle 添加引用注釋。如果你只想 source map 映射那些源自錯(cuò)誤報(bào)告的錯(cuò)誤堆棧跟蹤信息，但不想為瀏覽器開(kāi)發(fā)工具暴露你的 source map，這個(gè)選項(xiàng)會(huì)很有用。
?nosources-source-map? - 創(chuàng)建的 source map 不包含 sourcesContent(源代碼內(nèi)容)。它可以用來(lái)映射客戶端上的堆棧跟蹤，而無(wú)須暴露所有的源代碼。你可以將 source map 文件部署到 web 服務(wù)器。
Further Reading
更多建議：