souceMap: 一种提供源代码到构建后代码映射技术(如果构建后代码出错了,通过映射关系可以追踪到源代码错误)
devtool: ‘souce-map’
使用webpack命令运行后会产生一个built.js.map文件
[inline-|hidden-|eval-][cheap-[module-]]souce-map
souce-map:外部
错误代码的准确信息 和 源代码的错误位置
inline-souce-map: 内联
只生成一个内联的souce-map
错误代码准确信息 和 源代码的错误位置
hidden-souce-map:外部
错误代码错误原因,但没有错误位置
不能追踪源代码错误,只能提示到构建后代码的错误位置
eval-souce-map:内联
每一个文件都生成对应的souce-map,都在eval
错误代码的准确信息 和 源代码的错误信息
nosouce-souce-map:外部
错误代码的准确信息 和 源代码的错误位置
cheap-souce-map:外部
错误代码准确信息 和 源代码的错误位置
只能精确到行
cheap-module-souce-map:外部
错误代码准确信息 和 源代码的错误位置
module会将loader的souce map加入
内联和外部的区别: 1. 外部生成了文件,内联没有 2. 内联构建速度更快

开发环境
速度快,调试更友好
速度快(eval>inline>cheap>…)
eval-cheap-souce-map
eval-souce-map
调试更友好
souce-map
cheap-module-souce-map
cheap-souce-map
—> eval-souce-map / eval-cheap-module-souce-map
#生产环境
内联会让代码体积变大,所以在生产环境不用内联
nosources-souce-map 全部隐藏
hidden-source-map 只隐藏源代码,会提示构建后代码错误信息
—> souce-map / cheap-module-souce-map