webpack中souceMap该如何合理配置?

问题一: 什么是soucemap?

A:利用webpack对项目代码打包,会生成对应的打包代码,及对应的map文件

简而言之sourceMap 是一种映射关系,它可以映射打包后的代码与打包前代码的关系
源代码<=map文件=>打包后的代码

问题二:soucemap有什么用?

A:打包后的代码跟源代码肯定是有出入的,我们在运行打包后的代码如果报错了,如何快速定位到报错位置就要依靠这个map文件了,报错信息会提示报错对应行和列.

问题三:map文件是否对代码打包速度有影响?较为合理的方案是哪个?

A:肯定是有的,具体来说,如果想给出更加具体详细的报错信息,那么其消耗的资源是会更大的,打包的速度也会降低;
针对于开发环境和生产环境给出一个较为合理的方案:

开发环境:devtool: 'eval-cheap-module-source-map’
生产环境:devtool: ‘cheap-module-source-map’ 或者为none,直接不生成 source map,这样是最快的

cheap 会只会提示报错的行,不会提示列,而且指针对于业务代码,不管第三方引入的,速率又会提升一些

eval-source-map - 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。