source map的使用
devtool
此選項控制是否生成靴拱，以及如何生成 source map蕾殴。
使用 SourceMapDevToolPlugin 進行更細粒度的配置吏祸。查看 source-map-loader 來處理已有的 source map烘嘱。
選擇一種 source map 格式來增強調(diào)試過程师骗。不同的值會明顯影響到構(gòu)建(build)和重新構(gòu)建(rebuild)的速度。
可以直接使用
SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin來替代使用devtool選項妇智，它有更多的選項滥玷，但是切勿同時使用devtool選項和SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin插件氏身。因為devtool選項在內(nèi)部添加過這些插件巍棱，所以會應(yīng)用兩次插件。
| devtool | 構(gòu)建速度 | 重新構(gòu)建速度 | 生產(chǎn)環(huán)境 | 品質(zhì)(quality) |
|---|---|---|---|---|
| (none) | +++ | +++ | yes | 打包后的代碼 |
| eval | +++ | +++ | no | 生成后的代碼 |
| cheap-eval-source-map | + | ++ | no | 轉(zhuǎn)換過的代碼（僅限行） |
| cheap-module-eval-source-map | o | ++ | no | 原始源代碼（僅限行） |
| eval-source-map | -- | + | no | 原始源代碼 |
| cheap-source-map | + | o | no | 轉(zhuǎn)換過的代碼（僅限行） |
| cheap-module-source-map | o | - | no | 原始源代碼（僅限行） |
| inline-cheap-source-map | + | o | no | 轉(zhuǎn)換過的代碼（僅限行） |
| inline-cheap-module-source-map | o | - | no | 原始源代碼（僅限行） |
| source-map | -- | -- | yes | 原始源代碼 |
| inline-source-map | -- | -- | no | 原始源代碼 |
| hidden-source-map | -- | -- | yes | 原始源代碼 |
| nosources-source-map | -- | -- | yes | 無源代碼內(nèi)容 |
這么多模式用哪個好蛋欣？
開發(fā)環(huán)境推薦：
? cheap-module-eval-source-map
生產(chǎn)環(huán)境推薦：
? none(不使用source map)
原因如下：
- 使用 cheap 模式可以大幅提高 soure map 生成的效率航徙。大部分情況我們調(diào)試并不關(guān)心列信息，而且就算 source map 沒有列陷虎，有些瀏覽器引擎（例如 v8） 也會給出列信息到踏。
- 使用 module 可支持 babel 這種預(yù)編譯工具，映射轉(zhuǎn)換前的代碼尚猿。
- 使用 eval 方式可大幅提高持續(xù)構(gòu)建效率窝稿。官方文檔提供的速度對比表格可以看到 eval 模式的重新構(gòu)建速度都很快。
- 使用 eval-source-map 模式可以減少網(wǎng)絡(luò)請求凿掂。這種模式開啟 DataUrl 本身包含完整 sourcemap 信息伴榔，并不需要像 sourceURL 那樣，瀏覽器需要發(fā)送一個完整請求去獲取 sourcemap 文件庄萎，這會略微提高點效率踪少。而生產(chǎn)環(huán)境中則不宜用 eval，這樣會讓文件變得極大糠涛。
