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


相关推荐

  • 前端学习学习再学习

    译注:本文翻译自谷歌工程师PhilipWalton的一篇博客。看过之后非常有感触,很多观点都是自己长期非常坚持和认同的,所以翻译出来分享给更多的前端同学!最近我收到一封读者来信让我陷入了思考,信

    2021年12月22日
    55
  • 聊聊系统平均负载_什么是负载敏感系统

    聊聊系统平均负载_什么是负载敏感系统一、什么是平均负载单位时间内,系统处于可运行状态和不可中断状态的进程数,可简单理解为系统平均活跃进程数可运行状态:top命令状态为R,包括Runnable和Running不可中断状态:top命令状态为D,正处于内核态关键流程中的进程,并且这些流程是不可打断的,比如等待硬件设备的I/O响应,这往往是对数据一致性的一种保护机制二、如何查看平均负载$uptime…,loada…

    2025年11月6日
    3
  • Angular面试题_vue框架面试题

    Angular面试题_vue框架面试题一、ng-show/ng-hide与ng-if的区别?第一点区别是,ng-if在后面表达式为true的时候才创建这个dom节点,ng-show是初始时就创建了,用display:block和display:none来控制显示和不显示。第二点区别是,ng-if会(隐式地)产生新作用域,ng-switch、ng-include等会…

    2022年9月2日
    5
  • BufferedWriter的用法

    BufferedWriter的用法/** *通过BufferedWriter写入数据到a.txt的文件中 *  *  *输出流,字符流,处理流 */importjava.io.BufferedWriter;importjava.io.FileWriter;importjava.io.IOException;publicclassTest{publicstatic

    2022年6月4日
    52
  • QQ浏览器谷歌版吾爱破解(QQ浏览器最新谷歌版)

    ubuntu软件安装大全本文基于ubuntu16.04系统本文提供下载地址:安装包地址:https://github.com/weiguow/ubuntu-software.gitdeepin-wine地址:https://github.com/weiguow/deepin-wine-ubuntu.git1.Chrome浏览器sudowgethttps://repo.fdzh.o…

    2022年4月15日
    138
  • present continuous_representative和representation

    present continuous_representative和representationeXtremeComponents指南JeffJohnston版本1.0.0本文档允许在遵守以下两条原则的条件下被使用和传播:1)不能凭借本文档索取任何费用2)以任何方式(印刷物或电子版)使用和传播时本文档时,必须包含本版权申明(更新中…)TableofContents定制FilterCell

    2022年8月20日
    5

发表回复

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

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