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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • scala隐式转换[通俗易懂]

    scala隐式转换[通俗易懂]简述:1:通过隐式转换,程序员可以在编写Scala程序时故意漏掉一些信息,让编译器去尝试在编译期间自动推导出这些信息来,这种特性减少代码量,忽略那些冗长的代码。2:我们经常引入第三方库,但当我们想要扩展新功能的时候通常是很不方便的,因为我们不能直接修改其代码。scala提供了隐式转换机制和隐式参数帮我们解决诸如这样的问题。Scala中的隐式转换是一种非常强大的代码查找机制。当函数、构造器调用缺少参数或者某一实例调用了其他类型的方法导致编译不通过时,编译器会尝试搜索一些特定的区域,尝试使编译

    2022年10月9日
    3
  • 培根密码加解密_二进制密码在线解密

    培根密码加解密_二进制密码在线解密0x00介绍培根密码实际上就是一种替换密码,根据所给表一一对应转换即可加密解密它的特殊之处在于:可以通过不明显的特征来隐藏密码信息,比如大小写、正斜体等,只要两个不同的属性,密码即可隐藏0x01代码实现脚本很简单,就是建立对应关系,对密文,或者明文进行相应的替换即可需要注意的是输入的都应该是全小写字母或全大写字母,在脚本里也有说明python脚本如下:#…

    2025年7月27日
    3
  • idea 2021.03.02 激活码(最新序列号破解)

    idea 2021.03.02 激活码(最新序列号破解),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    441
  • JLink、JTAG接口详细图解「建议收藏」

    JLink、JTAG接口详细图解「建议收藏」说明:1脚:通常连接到目标板的vdd,用来检测目标系统是否供电;检测原理上图中有简单的说明。2脚:原版的JLink这个引脚没有使用,不提供Vsupply输出,而很多改造版的JLink通过跳线选择从该引脚输出3.3V的电压给外边,我的就是这样的。可以到网上找JLink的原理图看看。http://infocenter.arm.com/help/index.jsp?top

    2022年5月27日
    266
  • Mybatis中Like 的使用方式以及一些注意点

    做一个积极的人编码、改bug、提升自己我有一个乐园,面向编程,春暖花开!模糊查询在项目中还是经常使用的,本文就简单整理Mybatis中使用Like进行模糊查询的几种写法以及一些常见的问题。使用Springboot简单配置一下Mybatis,然后进行说明。Springboot集成Mybatis这里就不做介绍了。初始数据方式一在Mybatis中的第一种写法: <!–有sq…

    2022年2月28日
    47
  • PyCharm使用教程 — 5、PyCharm的基本配置「建议收藏」

    PyCharm使用教程 — 5、PyCharm的基本配置「建议收藏」PyCharm基础配置PyCharm安装完毕之后,我们需要修改一些常用的配置让视觉上更加享受,比如修改PyCharm的主题以及字体显示呢基础配置在File->Settings中进行修改主题在Settings中选择Appearance&Behavior->Appearance,如下图所示我个人习惯使用Darcula的黑色主题,除了默认的主题,我们也可以自己安装其他主题风格。如何安装主题主题可以从网站http://www.themesmap.com/上进行下

    2022年8月29日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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