webpack中 source-map分类

918 阅读2分钟

前言:

哈哈哈,我又来了,今天小编给大家分享的是webpack中source-map。也许很多人对source-map已经不陌生了,但是今天小编主要是给大家说下sourcemap的分类以及用途

概念

sourcemap的出现其实是为了解决开发代码和实际运行的代码结果不一致的问题,帮助我们debugger到原始代码的技术

分类项

  1. source-map 产生.map文件
  2. eval 代码使用eval包裹
  3. inline 将.map文件作为DataURI嵌入,不单独生成.map文件
  4. module 包含的loader的sourcemap 方便映射到代码转换之前
  5. cheap 不包含列信息 也不包含loader的sourcemap

常用的实例:

  1. source-map 原始代码 最好的sourcemap质量有完整的结果,但是会很慢
  2. eval-source-map 源码代码 最高的质量 以及最低的性能
  3. eval-cheap-module-source-map 原始代码 只有行内 最高的质量和更低的性能
  4. eval 生成代码 每个模块都被eval执行,并且存在@sourceURL,带eval的构建模式能cache SourceMap
  5. cheap-source-map 转换代码(行内) 生成的sourcemap没有列映射,从loaders生成的sourcemap没有被使用
  6. cheap-module-source-map 原始代码(只有行内) 与上面一样除了每行特点的从loader中进行映射

最佳组合

  1. 开发环境中 因为调试的时候需要最全代码 性能可以牺牲 所以我们一般选择 {eval-cheap-module-source-map}
  2. 生产环境中 其实我们需要sourcemap,为了减少体积,我们不能上传,但是出问题的时候 我们也是需要调试的 所以我们可以选择 {cheap-module-source-map}

运行结果

cheap-soure-map.png

eval.png

eval-cheap-module-source-map.png

eval-cheap-source-map.png

eval-source-map.png

source-map.png

cheap-module-source-map.png

源码分析

webpack打包运行结果.png 这个是webpack 打包的运行结果 已经给大家写注释了,考虑到直接写话语大家容易懵,所以直接代码添加注释

后续还有很多分享哦。请大家及时关注