source-map配置

source-map

概念：构建源代码和打包后代码映射关系的一种技术
作用：追踪源代码方便调试

webpack.config.js中配置

module.exports = {
dev-tool: 'source-map'
}

配置	内联or外联	特点
soure-map	外部	错误代码准确信息和源代码的错误位置
inline-source-map	内联	错误代码准确信息和源代码的错误位置
hidden-source-map	外部	错误代码错误原因但是没有错误位置，不能追踪错误源代码 只能提示到构建后代码的错误位置
eval-source-map	内联	每一个文件都生成对应的source-map，同样能查看错误代码准确信息和源代码的错误位置
nosources-source-map	外部	有错误信息但是没有源代码
cheap-source-map	外部	错误只精确到行不能精确到列
cheap-module-source-map	外部	错误代码准确信息和源代码的错误位置 module会将loader的source map加入

• 内联和外部的区别：1外部生成文件，内联没有。2内联构建速度更快。
• 开发环境：
  -速度快（eval>inline>cheap>…）更快的组合一下eval和cheap
  即eval-cheap-source-map>eval-source-map（vue-cli默认配置）
  -调试更友好 source-map 或者cheap-module-source-map 或者cheap-source-map
• 生产环境：
  -考虑源代码要不要隐藏？调试要不要更友好？内联会让代码体积变大，所以生产环境不用内联
  nosources-source-map:全部隐藏
  hidden-source-map:只隐藏源代码，会提示构建后代码错误信息
  常用source-maph/cheap-module-source-map

总结

常用
生产：eval-source-map
开发：source-map