source map是为了解决开发代码与实际代码不一致时，帮助我们debug到原始开发代码的技术。 webpack通过配置可以自动给我们those maps文件，map文件是一种对应编译文件和源文件的方法。

source map的类型

类型	含义
source-map	原始代码最好的作词map质量有完整的结果,但会很慢
eval-source-map	原始代码同样道理，但是最高的质量和最低的性能
cheap-module-eval-source-map	原始代码(只有行内)同样道理,但是更高的质量和更低的性能
cheap-eval-source-map	转换代码(行内)每个模块儿被eval执行，并且source map作为eval的一个data url
eval	生成代码，每个模块儿都被eval执行并且存在@sourceUrl，带eval的构建模式能cache sourcemap
cheap-source-map	转换代码(行内)，生成的sourcemap没有列表映射，从loader生成的source map没有被使用
cheap-module-source-map	原始代码(只有行内)与上面一样，除了每行特点的从loader中进行映射

看似配置相很多，其实只有五个关键字，eval、source-map、cheap、module和inline的任意组合。

关键字	含义
eval	使用eval包裹代码
source-map	产生map文件
cheap	不包含列信息
module	包含loader的sourcemap，否则无法定义源文件
inline	将map 作为data url输入，不单独生成map文件

• eval eval执行
• eval-source-map 生成sourcemap文件
• cheap-module-eval-source-map 不包含列
• cheap-eval-source-map无法查看到真正的源代码

如何选择sourcemap的类型？

首先，在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系，因此不管是开发还是生产环境都忽略模块打包后的列信息；不管是生产环境还是开发环境，我们都需要定位debug到最原始的资源，比如定位错误到jsx、ts的原始代码而不是经过编译后的js代码；因为需要生成map文件，所以得有source map属性。

总结：

• 开发环境使用：cheap-module-eval-source-map
• 生产环境使用：cheap-module-source-map