03-05.SourceMap

SourceMap

我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。
SourceMap就是为了解决这个问题而产生的，简单的说SourceMap就是一个映射关系。他可以将在dist打包输出的代码与我们的源代码之间建立一个映射，告诉我们打包编译后的代码报错的地方实际位于我们源代码中的什么位置。便于我们进行debug

几种常见的devtool的配置关键词含义

• source-map：针对项目源代码建立和编译后代码映射管理
• cheap：只针对我们自己的业务代码进行映射，不包含依赖的第三方模块，同时映射关系，只针对到行
• inline：编译打包后，不生成独立的map文件，而是直接将映射关系，打包编译到入口文件中
• module：对依赖的第三方库，也建立相应的映射关系
• eval：执行效率最快、性能最好的方式，他不建立独立的映射关系文件，而是通过eval()函数，执行代码，并通过注释链接了映射关系的方式，来生成映射。但是针对复杂度较高的项目，他提示的内容，并不全面。

devtool的最佳实践

• mode: "development"的情况下，使用cheap-module-eval-source-map
• mode: "production"的情况下，使用cheap-module-source-map

阅读资料

• webpack文档：devtool