说明
- 这套笔记是对于
webpack 5.x进行阐述的。（webpack <= 4用法稍有不同）
source-map 是什么
source-map 是 webpack 构建过程中用来追踪源码索引的工具。通过 source-map 源码追踪可以帮助运维在更短的时间内发现代码中的漏洞并修复。
如何配置 source-map
在 webpack.config.js 中，配置 devtool 选项可以帮助我们配置对应的 source-map
const config = {
// ...
devtool: '{{ 你想要配置的 source-map }}'
// ...
};
source-map 可以配置什么呢？
具体配置参考官网:
| 配置的内容 | 表现出来的性能 | 是否用于 production 模式 | 质量级 | 配置说明 |
|---|---|---|---|---|
| (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. |
结论：devtool 推荐配置
开发环境：eval-cheap-module-source-map (eval-cheap-source-map)
生产环境：cheap-module-source-map
