sourceMap

什么是sourceMap,sourceMap 就是我们通过打包插件将源代码打包过后（简称压缩文件）和源文件内容不一致导致出现错误调试时候无从下手。

sourceMap的格式 以.map结尾

  1. {
  2. 　　　　version : 3,
  3. 　　　　file: "out.js",
  4. 　　　　sourceRoot : "",
  5. 　　　　sources: ["foo.js", "bar.js"],
  6. 　　　　names: ["src", "maps", "are", "fun"],
  7. 　　　　mappings: "AAgBC,SAAQ,CAAEA"
  8. 　}

整个文件就是一个JavaScript对象，可以被解释器读取。它主要有以下几个属性：

  1. 　　- version：Source map的版本，目前为3。
  3. 　　- file：转换后的文件名。
  5. 　　- sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
  7. 　　- sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
  9. 　　- names：转换前的所有变量名和属性名。
  11. 　　- mappings：记录位置信息的字符串，下文详细介绍。

如何使用soureMap呢？

1.在压缩代码的最后一行加入 //# sourceMappingURL = jquery-3.4.1.min.map 注加入之前必须要有对应的.map文件后面会介绍怎么生成map文件

加入之后如果代码有错误会很容易找到错误 。可以设置个断点查看，执行的就是没压缩之前的js

sourceMap2.png

sourceMap3.png

webpack 配置sourceMap 。sourceMap配置devtool

在webpack.config.js 中加入

  1. devtool:'source-map',

sourceMap5.png

项目打包运行后可以在dist目录中js对应的.map文件 自动生成.map文件

sourceMap6.png

而且呢可以看到下图的bundle.js 最后一行写了 //# sourceMappingURL=bundle.js.map

sourceMap7.png

这时候运行打包项目中错误的地方会直接定位到源码位置

devtool 的所有值

https://webpack.docschina.org/configuration/devtool/#root 官网

  • eval 文档上解释的很明白，每个模块都封装到 eval 包裹起来，并在后面添加 //# sourceURL
  • source-map 这是最原始的 source-map 实现方式，其实现是打包代码同时创建一个新的 sourcemap 文件， 并在打包文件的末尾添加 //# sourceURL注释行告诉 JS 引擎文件在哪儿
  • hidden-source-map 文档上也说了，就是 soucremap 但没注释，没注释怎么找文件呢？貌似只能靠后缀，譬如xxx/bundle.js 文件，某些引擎会尝试去找 xxx/bundle.js.map
  • inline-source-map 为每一个文件添加 sourcemap 的 DataUrl，注意这里的文件是打包前的每一个文件而不是最后打包出来的，同时这个 DataUrl 是包含一个文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一个 url。
  • eval-source-map 这个就是把 eval 的 sourceURL 换成了完整 souremap 信息的 DataUrl
  • cheap-source-map 不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）
  • cheap-module-source-map 不包含列信息，同时 loader 的 sourcemap 也被简化为只包含对应行的。最终的 sourcemap 只有一份，它是 webpack 对 loader 生成的 sourcemap 进行简化，然后再次生成的。

sourceMap8.png