webpack devtools_webpack loader和plugin的区别

webpack devtools_webpack loader和plugin的区别前言devtool也是之前常用的一个配置,我们稍微了解下吧,不研究太深,毕竟现在都不怎配置他。内容devtool是配置sourceMap的。sourceMap大家都知道,我们本地或者测试环境出了错误,可以在source中迅速定位错误,用到的就是.map(map文件),这个文件中是源文件映射(主要是源文件代码)。但是我们在network中看不到.map文件的请求,盲猜一波是浏览器做了屏蔽,不让我们看这种请求。(毕竟是源码,我单独下载map文件是可以下载下来的)接下来,当devtool被配置为

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

Jetbrains全系列IDE稳定放心使用

前言

devtool也是之前常用的一个配置,我们稍微了解下吧,不研究太深,毕竟现在都不怎配置他。

内容

devtool是配置sourceMap的。
sourceMap大家都知道,我们本地或者测试环境出了错误,可以在source中迅速定位错误,用到的就是 .map (map文件),这个文件中是源文件映射(主要是源文件代码)。但是我们在network中看不到.map文件的请求,盲猜一波是浏览器做了屏蔽,不让我们看这种请求。(毕竟是源码,我单独下载map文件是可以下载下来的)

接下来,当devtool被配置为以下各个值的时候,对应的source-map状态

source-map

产生一个单独的source-map(.map)文件,打包的js文件里面最下行有map文件的地址。功能最完全,但会减慢打包速度。

eval

每个 module 会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL,所以一个chunk文件可能有很多个module。

inline开头

source-map被base64转码后,放在打包的js文件里面最下行
在这里插入图片描述

hidden开头

打包后有.map文件,打包后的js中没有sourceMappingURL,也没有base64转码后的内容(这种配置我很懵,有啥用)
在这里插入图片描述

eval开头(不是eval)

打包后的js代码和Source Map内容混淆在一起,通过eval输出。
在这里插入图片描述

cheap开头

.map中的源码经过loader处理了,我们点击到source看的时候是ES3、4、5的代码。

总结

还有一些平常不太用到的没有写出来,先这样吧

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

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

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


相关推荐

  • Spark部分流程说明

    Spark部分流程说明

    2021年8月10日
    55
  • 最新idea激活码永久【最新永久激活】

    (最新idea激活码永久)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月29日
    192
  • Mysql命令行修改字段类型

    Mysql命令行修改字段类型在做微信公众平台知识百科(账号:zhishiwiki)时,因为字段先前设计的不合理,导致内容装不下,因此需要修改其字段类型为text这里使用到了alter命令altertable表名称modify字段名称字段类型[是否允许非空];作者说:只有用到了,才能学

    2022年5月20日
    37
  • Eclipse中建多层级包时出现的问题「建议收藏」

    Eclipse中建多层级包时出现的问题「建议收藏」最近一直在学习idea的使用,好久没有用Eclipse了,今天想试着写一个功能,但是在Eclipse中创建包时出现问题了。创建的包都成为平级了。那么Eclipse中如何创建多层包呢?解决方案:    方法一:         1)先在src文件夹下创建com包,在com包里面创建一个类,例如:点击Finish就会出现如下:    2)以此类推建想要建的包,在删除之前的Test类即可。以下是我的效果…

    2022年6月13日
    33
  • 计算机考试身份证和准考证号

    计算机考试身份证和准考证号大家好啊,距离22考研初试仅剩26天,现在这个时候,大家除了对知识点进行查缺补漏之外,也得关注一些关于考前的准备工作,还有考场的注意事项哦!因为地区的不同,考点的不同,监考老师的不同,考试的要求和规定也会有差异哦,所以大家在拿到准考证之后,一定要仔细查看考试考点的要求~#考研倒计时#打开腾讯新闻,查看更多图片>1、可不可以戴手表、手环?如果要戴手表,那必须是没有记忆及计算功能的,也就是机械表,手环算电子产品大概率是不可以带的,在进考场之前可以询问一下监考老师,确认一下是否可以带

    2022年5月26日
    71
  • Odin Inspector 系列教程 — Custom Value Drawer Attribute

    Odin Inspector 系列教程 — Custom Value Drawer AttributeCustomValueDrawerAttribute特性,允许用户自定义一个绘制方法,字段将以自定的绘制方式展示在Inspector中,非常灵活。含有Label和不含有Label的字段[CustomValueDrawer(“HaveLabelNameFunction”)]publicstringHaveLabelName;…

    2022年7月21日
    12

发表回复

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

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