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