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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java文件上传功能代码 —— 普遍适用

    Java文件上传功能代码 —— 普遍适用通过之前的博客,基本上已经将各个框架上传文件的功能逻辑理清楚,有文件下载肯定就需要有文件上传,那么接下来会跟大家一起分享各个框架上传文件的功能代码;

    2022年5月15日
    33
  • tomcat8安装及配置教程_vrrp配置实例

    tomcat8安装及配置教程_vrrp配置实例1.下载tomcat8,官网地址:http://tomcat.apache.org/根据自己电脑的系统,下载对应的版本zip,我下载的是window64位的zip包下一步:2.解压缩apache-tomcat-8.5.11-windows-x64.zip到D盘3.环境变量配置:(请先看文章结尾)3.1系统变量,新增 CATALINA_HOME,地址就是刚才文件夹,不需要带/bin3.2…

    2022年9月18日
    1
  • L05 Laravel 教程 – 电商实战

    L05 Laravel 教程 – 电商实战

    2021年10月26日
    31
  • java setproperty 未生效_Java System类setProperty()方法及示例[通俗易懂]

    java setproperty 未生效_Java System类setProperty()方法及示例[通俗易懂]系统类setProperty()方法setProperty()方法在java.lang包中可用。setProperty()方法用于将给定参数(system_property)表示的系统属性与给定另一个参数(system_property_value)一起设置。setProperty()方法是静态方法,因此也可以使用类名进行访问。setProperty()方法方法在设置系统属性时会引发各种异常Sec…

    2022年7月12日
    66
  • 软件测试流程详解「建议收藏」

    软件测试流程详解「建议收藏」1.软件测试的定义:使用人工或自动手段,来运行或测试某个系统的过程。其目的在于检验它是否满足规定的需求或弄清预期结果与实际结果之间的差别。百度百科定义:软件测试(英语:SoftwareTesting),描述一种用来促进鉴定软件的正确性、完整性、安全性和质量的过程。换句话说,软件测试是一种实际输出与预期输出间的审核或者比较过程。软件测试的经典定义是:在规定的条件下对程序进行操作,以发现程序错…

    2022年6月7日
    22

发表回复

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

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