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