webpack devtool详解

article/2025/9/29 1:48:00

前言

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的代码。

总结

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


http://chatgpt.dhexx.cn/article/xo9yv0xQ.shtml

相关文章

devtool配置

devtool配置 一、devtool配置1.source map 源码地图2.webpack中的source map3.对于开发环境 一、devtool配置 1.source map 源码地图 本小节的知识与 webpack 无关 前端发展到现阶段,很多时候都不会直接运行源代码,可能需要对源代码进行合并、压缩、转换…

dev-tool安装方法(手动安装版)

记录一下vue调试神器dev-tool的安装过程,由于是在公司内网,也不方便挂梯子,所以手动安装——下载源码在本地编译,再添加扩展程序的方式安装。过程如下: 一、dev-tool源码获取 git地址:https://github.com/…

一文彻底搞懂webpack devtool

为什么需要Source Map 首先根据谷歌开发者文档的介绍,Source Map一般与下列类型的预处理器搭配使用: 转译器(Babel)编译器(TypeScript)Minifiers(UglifyJS) 为什么呢?…

OpenBmc开发8:devtool简介与使用

1 简介 devtool是yocto中的一个工具,此命令行工具作为可扩展SDK(eSDK)的一部分,是基础组件。可以使用devtool来帮助构建,测试和打包eSDK中的软件。可以使用该工具有选择地将构建的内容集成到OpenEmbedded构建系统构建…

怎么在navicat(Navicat for MySQL)中运行SQL代码

1、首先在navicat中新建一个数据库(之前已经建好数据库,忽略本步) 2、点击上图中的“查询”命令 3、再点击“新建查询” 4、系统自动跳出如下图命令窗口 5、可以在命令行中敲代码或直接复制已有代码。如果代码是关于建表,执行成…

使用SQL语句创建数据表

写法一 create table student (sno char(10) primary key,sname varchar(20) not null,ssex char(2),sage smallint,sdept varchar(20),sid char(18) unique)写法二 create table student (sno char(10), sname varchar(20) not null, ssex char(2), sage smallint, sdept v…

SQL代码自动生成器

SQL代码自动生成器,效果图如下: 实现原理很简单: 通过数据库名,获取到数据表名,进而获取到数据字段。通过可视化的选择自定义的添加修改,一步一步完成SQL语句的编写。 其中对于常用的存储过程参数列表的书…

sql语句智能提示插件

1.下载安装 SqlPrompt10 及SQL.Prompt.Keygen注册码生成工具 链接: https://pan.baidu.com/s/1Oa3Ci6o2JjHZMjTXHdCkQg?pwdghew 提取码: ghew 2.修改hosts文件(如若跳过此步骤,虽然可以成功,但是重启电脑之后,又得重新操作&a…

sql server代码创建数据库详细过程

1.先打开sql server 2.点击新建查询 3.创建 数据库 主数据文件的大小为5MB,文件【按兆字节】的方式增长,一次增长2MB,最大容量20MB; 事务日志文件大小为4MB,文件【按百分比】的方式增长,一次增长25%&#…

vue实现codemirror代码编辑器中的SQL代码格式化功能

vue实现codemirror代码编辑器中的SQL代码格式化功能 1、首先使用npm安装sql-formatter插件 npm install --save sql-formatter2、然后引入该sql-formatter.js文件 import sqlFormatter from "sql-formatter";3、接下来就是针对需要格式化的代码调用该方法就OK啦 /…

SQL Server 代码颜色

今天初识SQL Server 随便敲了点代码、发现这代码真是五颜六色、既然有颜色就有寓意! 原来有这么多颜色、真是学习了! _____________________________chenchen

IDEA格式化SQL代码

IDEA格式化SQL代码 写在前面1.1、建立连接,数据库服务器地址,账号,密码等..1.2、基本操作,很多,增删改查,控制台SQl编写等等 写在前面 IntelliJ IDEA集成了很多我们开发中常用的工具,Linux连接…

SQL除法怎么用代码表示

SQL除法代码详解 前言一、除运算(关系代数)二、第一题:2.1导入数据到SQL Server:2.2理解:2.2.1代码:2.2.2↑代码理解和答案: 三、第二题:求使用了同“供应商S1所供应的全部零件”相同…

VUE实现SQL在线编辑器,SQL分析器,SQL代码关键字提示

1、首先使用npm安装CodeMirror插件,sql-formatter格式化插件 npm install --save codemirror npm install --save sql-formatter2、然后引入该文件 import codemirror/theme/ambiance.css import codemirror/lib/codemirror.css import codemirror/addon/hint/show-hint.cssc…

数据库SQL(基础代码)

启动、连接、断开和停止MySQL服务器 通过系统服务器和命令提示符(DOS)都可以启动、连接断开和停击MySQL,操作非常简单。 1.启动、停止MySQL服务器   启动、停止MySQL服务器,的方法有两种:系统服务器和命令提示符(DOS)。 (1)通过系统服务器启动、停止MySQL服务器   …

html640设计稿,移动设备分辨率(终于弄懂了为什么移动端设计稿总是640px和750px)...

在我开始写移动端页面至今,一直有2个疑问困扰着我,我只知道结果但不知道为什么 问题1:为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准,给的750px) 问题2:为什么我们拿到640px和750px的设计稿&#xf…

1px像素问题

为什么会存在1px问题?怎么解决? - 掘金 作为前端,你应该了解的分辨率/逻辑像素/物理像素/retina屏知识🧐 - 掘金 解决移动端1px边框问题的几种方法 - AhuntSun - 博客园 1、分辨率 分辨率x像素(水平) * …

px和分辨率的关系总结

在相同的屏幕宽高下:如:15.6英寸(396.24毫米)的笔记本电脑: 每单位1920*xxx的分辨率1366*xxx的分辨率一毫米1920/396.244.8个px1366/396.243.4个px 高分辨率意味着大约每一毫米5像素点,像素点越多&#x…

uni-app之响应式单位upx和rpx

一、upx uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。 uni-app 规定屏幕基准宽度750upx。 开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下&…

HTML5 实现本地图片裁剪

HTML5 实现本地图片裁剪 文章目录 HTML5 实现本地图片裁剪1.知识点1.HTML 结构与 CSS 样式2.初始化3 实现 handleFiles,获取文件,读取文件并生成 url4.实现 paintImage 方法5 实现 cutImage 方法6 编写 drag 方法7 保存截图8 js部分 代码 这次小的案例是…