webpack中devtool里的SourceMap模式怎么理解？
我们在使用wenpack构建react或者vue项目的时候，一般分为dev开发环境和prod线上环境，
一般开发环境要求我们可以看见源代码，方便进行进行断点调试等，及时处理开发中的问题；线上模式完全不同，一般不要求可以看见源代码，便于我们保护我们的代码隐私，也从而减少性能消耗；
根据上面说的，我们就应该知道如何选择了，所以建议如下：
dev开发环境推荐：eval-cheap-module-source-map，inline-cheap-module-source-map
prod线上环境推荐：（none）不设置，nosources-source-map
| 模式 | 编译速度 | 二次编译速度 | 是否适合生成环境 | 代码格式 |
|---|---|---|---|---|
|
(none) 不设置 |
fastest | fastest | yes | 编译后代码 |
|
eval |
fastest | fastest | no | 源代码 |
|
eval-cheap-source-map |
fast | faster | no | 源代码 |
|
eval-cheap-module-source-map |
slow | faster | no | 源代码 |
|
eval-source-map |
slowest | fast | no | 源代码 |
|
eval-nosources-source-map |
||||
|
eval-nosources-cheap-source-map |
||||
|
eval-nosources-cheap-module-source-map |
||||
|
cheap-source-map |
fast | slow | yes | 源代码 |
|
cheap-module-source-map |
slow | slower | yes | 源代码 |
|
inline-cheap-source-map |
fast | slow | no | 源代码 |
|
inline-cheap-module-source-map |
slow | slower | no | 源代码 |
|
inline-source-map |
slowest | slowest | no | 源代码 |
|
inline-nosources-source-map |
||||
|
inline-nosources-cheap-source-map |
||||
|
inline-nosources-cheap-module-source-map |
||||
|
source-map |
slowest | slowest | yes | 源代码 |
|
hidden-source-map |
slowest | slowest | yes | 源代码 |
|
hidden-nosources-source-map |
||||
|
hidden-nosources-cheap-source-map |
||||
|
hidden-nosources-cheap-module-source-map |
||||
|
hidden-cheap-source-map |
||||
|
hidden-cheap-module-source-map |
||||
|
nosources-source-map |
slowest | slowest | yes | 编译后代码 |
|
nosources-cheap-source-map |
||||
|
nosources-cheap-module-source-map |
