阅读 2448

webpack的sourcemap

js source map原理

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

如何开启source map?

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

//@ sourceMappingURL="xxxxx"复制代码
souce map的格式
{
    version: 3, // source map的版本,目前为3
    file: "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

参考文献:

文章分类
前端