webpack的devtool[通俗易懂]

webpack的devtool[通俗易懂]这里以环境分类为分析方向1.对开发环境eval-每个模块都使用eval()执行,并且都有//@sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从loader中获取sourcemap),所以不能正确的显示行数。eval-source-map-每个模块使用eval()执行,并且sourcem…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

这里以环境分类为分析方向

1.对开发环境

eval – 每个模块都使用 eval() 执行,并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。

webpack的devtool[通俗易懂]

 

eval-source-map – 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

webpack的devtool[通俗易懂]

 

cheap-eval-source-map – 类似 eval-source-map,每个模块使用 eval() 执行。这是 “cheap(低开销)” 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像 eval devtool。

cheap-module-eval-source-map – 类似 cheap-eval-source-map,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。

 

2.对生产环境

(none)(省略 devtool 选项) – 不生成 source map。这是一个不错的选择。

 

source-map – 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。并在打包文件的末尾添加//# souceURL,注释会告诉JS引擎原始文件位置。

你应该将你的服务器配置为,不允许普通用户访问 source map 文件!

webpack的devtool[通俗易懂]

 

hidden-source-map – 与 source-map 相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。

nosources-source-map – 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器

 

 

参考:https://www.webpackjs.com/configuration/devtool/

   https://www.cnblogs.com/hhhyaaon/p/5657469.html

   https://blog.csdn.net/liwusen/article/details/79414508

转载于:https://www.cnblogs.com/myzy/p/9908920.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185588.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Android Developer_Android api

    Android Developer_Android apiAndroidNforDevelopers重要的开发者功能多窗口支持通知JIT/AOT编译快速的应用安装路径外出瞌睡模式后台优化DataSaver快速设置图块API号码屏蔽来电过滤区域设置和语言Android中的ICU4JAPIOpenGLES3.2APIAndroidTV录制AndroidforWork辅助工具直接启动密钥认

  • CSS3-transition「建议收藏」

    CSS3-transition「建议收藏」1、transition代表css3中的过渡,可以使元素从一种样式逐渐改变为另一种的效果。2、transition:height2s;表示需要渐变的是元素高度height,渐变时间是2s。tra

  • 系统分析师零散知识点「建议收藏」

    系统分析师零散知识点「建议收藏」数据库连接池技术是指在系统初期或者初次使用时,完成数据库的连接,以后不再释放此连接,在处理后面的请求时,反复使用这些已经建立的连接。这种方式可以大大减少数据库的处理时间,有利于提高系统的整体性能、可测量性和扩展性。应用服务器的高速缓存?在应用服务器中有页面的缓存和数据库的缓存。页面的缓存是指将特定的URL对应的页面在缓存中予以记录,以便在

  • 茂名天源石化有限责任公司_茂名石化为什么在茂名

    茂名天源石化有限责任公司_茂名石化为什么在茂名目前来看,广东省已经拥有诸多国外化工巨头、大型民营炼化企业和不少国企的炼化项目,成为很多石化企业首选的项目落地基地。“石化业高质量发展看广东”,已经逐渐明朗。今年以来,已有恒力石化(惠州)PTA项目、东华能源(茂名)烷烃资源综合利用项目(一期)、茂名天源石化碳三碳四资源利用等项目开工今年3月31日,广东省发展改革委官网公布《广东省2021年重点建设项目计划》。在2021年重点项目名单中,广东共安排省重点项目1395个,总投资达7.28万亿元,年度计划投资8000亿元。其中新开工项目有3个,总投资约2

    2022年10月16日
  • ReadTimeoutError: HTTPSConnectionPool(host=’files.pythonhosted.org’, port=443): Read timed out.

    ReadTimeoutError: HTTPSConnectionPool(host=’files.pythonhosted.org’, port=443): Read timed out.

    2021年10月22日
  • day08(异常处理,创建异常,finally,throws和throw的区别)

    day08(异常处理,创建异常,finally,throws和throw的区别)

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号