webpack-devtool选项 --生成source-map便于开发调试（二）

source-map

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

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

代码：

1 2	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（错误提示一整行忽略列）

会生成bundle.js.map

eval( )函数执行js代码，在开发环境development，执行打包的js代码

生产环境会压缩代码，使代码紧密在一起