webpack的sourcemap

js source map原理

作用：主要用于调试，现在代码都会经过压缩混淆，这样报错提示会很难定位代码，sourcemap就是一个信息文件，里面存储着位置信息，也就是说，转换后的代码的每个位置，所对应的转换前的位置(阮老师有详细解释)

如何开启source map？

在打包后的代码尾部追加一行：

//@ sourceMappingURL="xxxxx"复制代码

souce map的格式

{version: 3, // source map的版本，目前为3file: "out.js", // 转换后的文件名sourceRoot: "", // 转换前的文件所在的目录，如果与转换前的文件在同一目录，该项为空sources: [], // 转换前的文件names: [], // 转换前的所有变量名的属性名mappings: "" // 记录位置信息的字符串sourceContents: [] // webpack生成的sourcemap有这一项，里面是模块源码
}复制代码

webpack devtool配置

value	作用
eval	每个模块都用eval封装进行运算，并且在末尾追加注释 //@ sourceURL
source-map	生成一个sourcemap文件，并且会在每个bundle文件末尾追加注释 // sourcemap=xx.js.map
hiden-source-map	跟上面source-map作用一样，生成一个sourcemap文件，只是没有文件末尾的注释，默认查找xx.js.map文件
inline-source-map	生成一个base64的sourcemap文件并注释追加在每个bundle文件的末尾
eval-source-map	每个module都用eval封装运算，并在模块的末尾追加base64的SourceMap
cheap-source-map	生成一个没有列信息的sourcemap文件，不包含loader的sourcemap（代码定位的是webpack中配置的loader转换的代码，不是纯源码）
cheap-module-source-map	生成一个没有列信息的sourcemap文件，同时loader的sourcemap被简化为只包含对应行的

总结：

eval: 每个module用eval封装进行运算，每个module后配置source-map的dataUrl或者sourceurl

source-map: 每个bundle文件后追加sourcemap的sourceURL或者dataURL，包括行信息，列信息，loader也有对应的sourcemap

cheap: sourcemap文件中的mappings中只有对应的行信息，没有列文件，并且没有对应的loader的sourcemap，对应的都是loader转换后的代码，不是纯正的源代码

module: 添加loader的对应的sourcemap

inline: 文件内联base64的dataURL的sourcemap信息（不推荐使用，因为这样会造成源代码的体积巨大）

以上几种可以进行随机搭配，生成适合自己的sourcemap

参考文献：

www.ruanyifeng.com/blog/2013/0…

juejin.im/post/582935…

segmentfault.com/a/119000000…

webpack的sourcemap相关推荐

Vue2.0开发之——webpack基础-SourceMap(11)
一概述由项目异常引出Source Map 什么是Source Map Source Map的几种配置 Source Map的最佳实践二由项目异常引出SourceMap 1-将index.js中 ...
Webpack中的sourcemap
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
webpack快速学习1
什么是webpack webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. webpack的特点 ...
【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
Webpack面试题
面试题希沃ENOW大前端公司官网:CVTE(广州视源股份) 团队:CVTE旗下未来教育希沃软件平台中心enow团队本文作者: 温广名片2.png 前言在前端工程化日趋复杂的今天,模块打包工具在我 ...
当面试官问Webpack的时候他想知道什么
希沃ENOW大前端公司官网:CVTE(广州视源股份) 前言在前端工程化日趋复杂的今天,模块打包工具在我们的开发中起到了越来越重要的作用,其中webpack就是最热门的打包工具之一. 说到webpa ...
SourceMap源码映射详细讲解
SourceMap源码映射详细讲解前端工程打包后代码会跟项目源码不一致,当代码运行出错时控制台上定位出错代码的位置跟项目源码上不对应.这时候我们很难定位错误代码的位置.SourceMap的用途是可以 ...
atool-build脚手架分析与webpack打包原理详解
最近要做一个js解析markdown的项目,所以当然想到了ant design,不过ant design内部又使用了atool-build脚手架,所以决定好好研究一下.如果有不对的地方还烦请指正.不过 ...
webpack优化系列(1)-HMR
webpack优化要做哪些方面呢? 开发环境性能优化优化打包构建速度优化代码调试生产环境性能优化优化打包构建速度优化代码运行性能(提高用户体验) 那么怎么优化呢? 当我们修改样式文件,实际上 ...

webpack的sourcemap

js source map原理

souce map的格式

webpack的sourcemap相关推荐

最新文章

热门文章