通过构建编译，可以将开发阶段的代码转换为能够在生产环境当中运行的代码，但是在运行阶段的代码与源代码之间会有很大的差异，如果需要调试应用，或者运行当中出现错误信息不方便定位，因为调试和报错都是基于转换过后的代码来运行的。可以通过Source Map映射与源代码之间的关系。通过转换过程中生成的Source Map文件就可以逆向解析，得到源代码。

Webpack 配置Source Map

  • eval：是否使用eval执行模块代码。
  • cheap：Source Map是否包含行信息。
  • module：是否能够得到Loader处理之前的源代码。

开发环境下一般选择cheap-module-eval-source-map。这种模式下首次打包速度相对较慢，但是在监视的模式下们重新打包速度相对较快。
生产模式下一般选择none，因为Source Map会暴露源代码。也可以选择nosources-source-map，这样可以定位到错误，但是不会暴露源代码。