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