webpack5构建之——devtool:source-map

source-map

一种提供源代码到构建后代码映射 技术（如果构建后代码出错了，通过映射可以追踪源代码错误）

[inline-|hidden-|eval_][nosources-][cheap-[module-]]source-map

source-map:外部
错误代码准确信息和源代码的错误位置
inline-source-map:内联
只生成一个内联source-map,错误代码准确信息和源代码的错误位置
hidden-source-map:外部
错误代码错误原因，但是没有错误位置，不能追踪源代码错误，只能提示到构建后代码的错误位置
eval-source-map:内联
每一个文件都生成对应的source-map,都在eval
错误代码准确信息 和 源代码的错误位置
nosources-source-map:外部
错误代码准确信息，但是没有任何源代码信息
cheap-source-map：外部
错误代码准确信息 和源代码的错误位置
只能精确到行
cheap-module-source-map:外部
错误代码准确信息 和源代码的错误位置
module会将loader的source-map加入

内联和外部的区别：
1、外部生成了文件，内联没有
2、内联构建速度更快

开发环境
速度快
（eval>inline>cheap>...）
eval-cheap-source-map
eval-source-map
调试更友好
souce-map
cheap-module-souce-map
cheap-souce-map
开发环境推荐使用eval-source-map:内联vue和react脚手架默认使用

生产环境中：
1、如果要隐藏源代码，使用nosources-source-map或hidden-source-map
2、如果要调试更友好的情况下，使用source-map

注意：生产环境中一般不使用内联方式，因为会使代码体积变得非常大，推荐使用外联

**推荐排序** --> source-map / cheap-module-source-map

nosources-source-map 源代码全部隐藏

hidden-source-map 只隐藏源代码，会提示构建后代码错误信息