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


相关推荐

  • win7 java修复工具哪个好_DLL修复工具哪个好

    win7 java修复工具哪个好_DLL修复工具哪个好为什么会用到dll修复工具呢?因为在打开某些程序或者软件的时候会提示找不到某某.dll文件,关键是这些dll文件还不一样,去网上下载这些dll文件结果显示跟系统的版本不一致,反正就是各种麻烦,自己去找又费时又费力,而且往往对于有些游戏来说,修补了某一个dll又提示缺少另一个dll文件,这些其实可能都是系统本身太精简或者没有安装一些依赖软件导致的,这时候你完全不需要手动去找这些dll文件,只需要使用…

    2022年5月11日
    42
  • Python – 编写可视化界面(Python+PyCharm+PyQt)

    Python – 编写可视化界面(Python+PyCharm+PyQt)Python编写可视化界面最近开始学习Python,但只限于看理论,编几行代码,觉得没有意思,就想能不能用Python编写可视化的界面。遂查找了相关资料,发现了PyQt,由于前一段时间刚看过Qt,而且对Qt的印象很好,于是觉得用PyQt应该是一个比较愉快的选择。1、前言PyQt的版本需要与Python的版本保持一致,在这里我用的PyQT的版本是PyQt5-5.6-gp…

    2022年5月17日
    40
  • lockfree 的队列的实现

    lockfree 的队列的实现一个高速无锁循环队列的实现。需要注意的是:(1)队列的大小(m_lMaxQueueSize)应该足够的大,避免处理不过来时,找半天找不到空位置。(2)还有一点是这种队列在push数据足够快时效率高点,不然pop时就阻塞了,改善的方式就是使用费阻塞的方式,判断几次没有就跳出去,还有这种队列也就在push数据足够快时效率高点,不然判断的次数就多了。(3)使用了原子操作的锁(4)需…

    2022年7月19日
    22
  • 5分钟商学院之个人篇–思考能力和谈判能力

    1.思考能力1.1六顶思考帽什么是六顶思考帽?每个人都有六顶不同颜色,代表不同思维方式的"帽子",分别是:(1)代表信息的白帽,充分搜索数据、信息和所有需要了解的情况

    2021年12月30日
    42
  • ELK实践

    ELK实践

    2021年5月12日
    115
  • mysql学习之mysql集群

    mysql学习之mysql集群本片博文是笔者学习《高性能mysql》一书的第一篇学习笔记,对应书籍章节为第10章。主要介绍了mysql集群部署方案主从集群部署。集群方案、主从同步原理、复制类型、docker安装mysql集群示例。

    2025年8月13日
    3

发表回复

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

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