webpack 的 source-map 设置

source map是什么

source map 是一个信息文件，里面储存着位置信息，是转化（打包压缩混淆）后代码与源文件代码的位置映射

source map的作用

在代码调试的时候，能快速定位到源文件的位置

如何在webpack中配置

在webpack.config.js中，有个devtool的属性可以配置

module.exports = {
  mode: "development",
  devtool: "cheap-module-eval-source-map",
}

webpack中的source map都有哪些值

官方地址：Devtool

devtool 值	comment 注解说明	recommend 推荐
none	不生成	Recommended choice for production builds with maximum performance. 具有最佳性能的生产版本的推荐选择。
eval	打包的代码会用eval包住	Recommended choice for development builds with maximum performance. 具有最佳性能的开发构建的推荐选择。
eval-cheap-source-map		Tradeoff choice for development builds. 开发构建的权衡选择。
eval-cheap-module-source-map		Tradeoff choice for development builds. 开发构建的权衡选择。
eval-source-map		Recommended choice for development builds with high quality SourceMaps. 具有高质量SourceMaps的开发版本的推荐选择。
cheap-source-map		-
cheap-module-source-map		-
source-map		Recommended choice for production builds with high quality SourceMaps. 具有高质量SourceMaps的生产版本的推荐选择。
inline-cheap-source-map		-
inline-cheap-module-source-map		-
inline-source-map		Possible choice when publishing a single file. 发布单个文件时的可能选择。

不再列举，因为其他的不常用

---

建议

开发环境 ：eval-cheap-module-source-map（4.* 时的 cheap-module-eval-source-map）
生产环境：cheap-module-source-map