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)
blank

相关推荐

  • pycharm配置Git和Github[通俗易懂]

    pycharm配置Git和Github[通俗易懂](Windows)pycharm配置Git和Github,协同开发1、安装Git1.1、验证是否安装git#cmd命令git–version#显示git版本则证明安装成功1.2、下载gitwindow下载链接安装好git之后,配置环境变量,验证git是否安装成功。1.3、配置git用户名和邮箱gitconfig–globaluser.name用户名gitconfig–globaluser.email邮箱1.4、在pycharm中配置git点击Fil

  • 在Android Studio中修改maven私库的地址[通俗易懂]

    在Android Studio中修改maven私库的地址[通俗易懂]在.gradle目录中,修改init.gradle文件,修改其中的maven地址。在.m2目录中,修改settings.xml文件,修改其中的maven地址。以下是init.gradle文件:allprojects{repositories{defREPOSITORY_URL=‘http://192.168.1.XX:XXXX/nexus/content/gro…

  • Sexy Beach PR 汉化补丁+入门教程

    Sexy Beach PR 汉化补丁+入门教程【遊戲名稱/Name】:SexyBeachPR【遊戲廠商/Company】:Illusion【發售日期/Saledate】:2015-9-11〓补丁说明:〓※本补丁为Illusion出

  • CSS样式表优先级

    CSS样式表优先级前端入门学习笔记(持续更新中)以下结论仅基于浏览器的表现,不涉及深层原理,有待深入。 行内样式VS内部样式、链接样式、导入样式 *结论:行内样式优先级最高 内部样式VS链接样式 …

  • Enterprise Library 验证的实现

    Enterprise Library 验证的实现参考地址:http://www.cnblogs.com/huangcong/archive/2010/06/03/1749634.htmlEnterpriseLibrary的验证我觉得最大的改变了验证的位置,可以通过配置文件来修改验证规则,这就极大的使验证更加灵活,原文中的一个错误就是第一步让点击 AddDatabaseSettings这个地方错了,应该点击AddSecuritySe…

    2022年10月20日
  • 玩玩三维重建–Visual SFM介绍

    玩玩三维重建–Visual SFM介绍转自:  奇点视觉        原文地址玩玩三维重建Leaveareply版权声明:本文系本站作者自己翻译整理,欢迎转载,但转载请以超链接形式注明文章来源(planckscale.info)、作者信息和本声明,否则将追究法律责任。我们在实时三维重建方面的工作今年已经密集展开。或许不久后某一天,你会在本站看到带有SLA

发表回复

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

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