03-05.SourceMap

SourceMap

我们在打包中,将开发环境中源代码经过压缩,去空格,babel编译转化,最终可以得到适用于生产环境的项目代码,这样处理后的项目代码和源代码之间差异性很大,会造成无法debug的问题。
SourceMap就是为了解决这个问题而产生的,简单的说SourceMap就是一个映射关系。他可以将在dist打包输出的代码与我们的源代码之间建立一个映射,告诉我们打包编译后的代码报错的地方实际位于我们源代码中的什么位置。便于我们进行debug

几种常见的devtool的配置关键词含义

  • source-map:针对项目源代码建立和编译后代码映射管理
  • cheap:只针对我们自己的业务代码进行映射,不包含依赖的第三方模块,同时映射关系,只针对到行
  • inline:编译打包后,不生成独立的map文件,而是直接将映射关系,打包编译到入口文件中
  • module:对依赖的第三方库,也建立相应的映射关系
  • eval:执行效率最快、性能最好的方式,他不建立独立的映射关系文件,而是通过eval()函数,执行代码,并通过注释链接了映射关系的方式,来生成映射。但是针对复杂度较高的项目,他提示的内容,并不全面。

devtool的最佳实践

  • mode: "development"的情况下,使用cheap-module-eval-source-map
  • mode: "production"的情况下,使用cheap-module-source-map

阅读资料

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • publicPath指定了一个在浏览器中被引用的URL地址。 对于使用 和 加载器,当文件路径不同于他们的本地磁盘...
    飞呀飞哥阅读 1,725评论 0 0
  • 关于Devtool 该选项控制是否以及如何生成源映射。官网上给出的可选值有: 其中一些值适合开发,一些用于生产。对...
    武昌鱼艾特222阅读 1,809评论 0 5
  • webpack sourceMap 使用说明 时间:2016-09-05 15:23:30作者:zhongxiaw...
    izhongxia阅读 6,223评论 0 0
  • source maps Webpack打包生成的.map后缀文件,使得我们的开发调试更加方便,它能帮助我们链接到断...
    zhangivon阅读 14,609评论 5 3
  • 剽悍终极营第二场分享,听硕博讲述她成功转型为k12的辅导老师,展开掘金之旅的故事,感受颇深。可以说,虽然我和她处于...
    乐脉阅读 228评论 0 1