webpack的source-map的详解

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

参数：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

代码：

devtool: 'eval-source-map'

可选方案：[生成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 >... )

  1. eval-cheap-souce-map

  2. eval-source-map

• 调试更友好

  1. souce-map

  2. cheap-module-souce-map

  3. cheap-souce-map

最终得出最好的两种方案 --> eval-source-map（完整度高，内联速度快） / eval-cheap-module-souce-map（错误提示忽略列但是包含其他信息，内联速度快）

生产环境：需要考虑源代码要不要隐藏，调试要不要更友好

• 内联会让代码体积变大，所以在生产环境不用内联

• 隐藏源代码

  1. nosources-source-map 全部隐藏
  2. hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

最终得出最好的两种方案 --> source-map（最完整） / cheap-module-souce-map（错误提示一整行忽略列）