在 Webpack 的编译过程中，可以通过 devtool 的配置选项选择以什么样的形式输出 SourceMap。Webpack 提供了非常多的选择方案，不同的选项可以达到的效果是不一样的，也会极大的影响最终编译的时间。Webpack 的官方文档，从编译时间、重编译时间（针对 Watch 下的修改重编译）以及最终的使用效果三个纬度，给出了各个配置选项的实际效果。（中文版文档在这里）
一般情况下：生产环境最终的打包，建议使用 source-map 作为配置。这种配置会将 SourceMap 文件打包到另外一个独立的文件中，线上代码不会暴露源文件，同时提供了最精细的代码映射关系，方便线上代码的调试和问题定位。当然，这种配置的缺点也非常明显，就是构建过程比较花费时间，因此一般只建议在最终要上线的版本中使用这种配置。
对于开发环境 Watch 模式下打包 Hot Reload 的版本，建议使用 eval-source-map 或者 cheap-module-eval-source-map。这两种模式，都会将代码用 eval 函数包裹起来，重编译的速度比较快，区别主要在于 SourceMap 的生成方案。前者会生成高品质的 SourceMap，因而初次构建的速度会比较慢，但是提供了行和列的映射；后者只提供了行层面的代码映射，因此会更加快一些，但是断点的效果会略打折扣（无法提供到列的映射关系）。
更多的类型以及各种情况的说明，可以参考官方文档（链接在上面给出）。