模块化原理:source-map
1. webpack打包基本配置
1.安装webpack与webpack-cli
npm i webpack webpack-cli
2.配置"build":"webpack"
3. 新建webpack.config.js
const path = require('path');
module.exports = {// mode: "development",// 默认production(什么都不设置的情况下);他会把代码丑化 也可以设置'development'mode:"production",entry: './src/main.js',output: {filename: 'main.js',path: path.resolve(__dirname, './build'),}
}
- Mode配置
- Mode配置选项,可以告知webpack使用相应模式的内置优化:
- 默认值是production(什么都不设置的情况下);
- 可选值有:‘none’ | ‘development’ | ‘production’;
- 具体配置说明官网参考

- mode配置开发与生产环境的打包
main.js
const a = '11111'
console.log(a);
console.log(fooc);
function foo() {console.log(a);
}
foo()
-
当把mode设置为
production或默认值 ,会发现打包的代码是下面的代码 -
因为下面的代码是经过丑化的。同时发布上线也会采用这样的代码
-
上线追求的是体积小,而不是打包速度

注意当引用或者不引用别的模块代码时,具体的错误信息也是查找不到的 -
但是把mode设置为
development,会发现打包的代码是下面的代码

-
上面的代码会在
eval执行的代码中,添加 //# sourceURL=; -
eval:development模式下的默认值,也不会生成
source-map,但是具体的报错位置信息很明确

当引入模块化语言时mode配置开发与生产环境的打包
main.js

- mode 设置为
development

- 可以看出上面的代码打包后,错误的信息提示也不是很准确的
- 当把mode设置为生成环境就更不用说了,错误信息也是不准确的,
- 因此要查看打包后的代码具体的错误信息,就需要生成
source-map文件
2. source-map基本说明
- 在开发时代码通常运行在浏览器上时,是通过打包压缩的:
- 也就是真实跑在浏览器上的代码,和我们编写的代码其实是有差异的;
- 比如ES6的代码可能被转换成ES5;
- 比如对应的代码行号、列号在经过编译后肯定会不一致;
- 比如代码进行丑化压缩时,会将编码名称等修改;
- 比如我们使用了TypeScript等方式编写的代码,最终转换成JavaScript;
- 但是,当
代码报错需要调试时(debug),调试转换后的代码是很困难的 - 要想保证调式代码一致性问题就需要引入
source-map- source-map是从已转换的代码,映射到原始的源文件;
- 使浏览器可以重构原始源并在调试器中显示重建的原始源;
2.1 source-map使用
在webpack.config.js 中配置
devtool:'source-map',
- 再把mode 设置为
生产环境或者默认不设置,打包后可以看到如下代码

- 设置mode为
mode: "development"可以也是一样 - 具体的报错信息都是可以看到明确指定位置的

- source-map的使用
- 根据源文件,生成source-map文件,webpack在打包时,可以通过配置生成source-map;
- 在转换后的代码,最后添加一个注释,它指向sourcemap;
# sourceMappingURL=common.bundle.js.map
注意点要想souce-map文件生效必须保证浏览器支持souce-map文件

2.2 source-map文件分析
- 发展版本 经过三次变更 较少打包体积(
原来的10倍-> 50% ->50%)

version:当前使用的版本,也就是最新的第三版;sources:从哪些文件转换过来的source-map和打包的代码(最初始的文件);names:转换前的变量和属性名称(因为我目前使用的是development模式,所以不需要保留转换前的名称);mappings:source-map用来和源文件映射的信息(比如位置信息等),一串base64 VLQ(veriable-length quantity可变长度值)编码;file:打包后的文件(浏览器加载的文件);sourceContent:转换前的具体代码信息(和sources是对应的关系);sourceRoot:所有的sources相对的根目录;
3. devtool设置source-map解析
- 配置 devtool:‘source-map’,
- 选择不同的值,生成的source-map会稍微有差异,打包的过程也会有性能的差异,可以根据不同的情况进行选择
- 具体的26个值设置参考
-
重要下面几个值不会生成source-map
-
false:不使用source-map,也就是没有任何和source-map相关的内容。 -
none:production模式下的默认值(什么值都不写),不生成source-map。 -
eval:development模式下的默认值,不生成source-map- 但是它会在eval执行的代码中,添加
//# sourceURL=; - 它会被浏览器在执行时解析,并且在调试面板中生成对应的一些文件目录,方便我们调试代码;
- 但是它会在eval执行的代码中,添加
-
eval其实就相当于一个函数,用于还原源文件代码,但是还原的代码不是太准确
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ foo: () => (/* binding */ foo),\n/* harmony export */ message: () => (/* binding */ message)\n/* harmony export */ });\nconst foo = 'Mssage 消息中心'\r\n\r\nfunction message() {\r\n\treturn '调用了消息中心'\r\n}\r\n\r\n\r\nmessage()\r\n\r\nconsole.log(notive);\r\n\n\n//# sourceURL=webpack://02_source_map/./src/untils/index.js?");
- eval-source-map值
- 会生成sourcemap,但是source-map是
以DataUrl添加到eval函数的后面
- 会生成sourcemap,但是source-map是
- inline-source-map值
- 会生成sourcemap,但是source-map是以
DataUrl添加到bundle文件的后面
- 会生成sourcemap,但是source-map是以
- cheap-source-map 值
- 会生成sourcemap,但是会更加高效一些(cheap低开销),因为它
没有生成列映射(Column Mapping) - 可以定位报错信息
- 会生成sourcemap,但是会更加高效一些(cheap低开销),因为它
相关文章:
模块化原理:source-map
1. webpack打包基本配置 1.安装webpack与webpack-cli npm i webpack webpack-cli 2.配置 "build":"webpack" 3. 新建webpack.config.js const path require(path); module.exports {// mode: "development",// 默认production(什么…...
【C++】开源:ncurses终端TUI文本界面库
😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍ncurses终端文本界面库。 无专精则不能成,无涉猎则不能通。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下…...
C语言的_Bool类型
C99 新增了 _Bool 类型,用于表示布尔值,即逻辑值 true 和 false。 _Bool 类型也是一种整数类型。 原则上 _Bool 类型只占用一位存储空间。 C语言将非 0 的数当为 true,0 当为 false。 代码示例: #include<stdio.h> int…...
【python爬虫】获取某一个网址下面抓取所有的a 超链接下面的内容
import requests as rq from bs4 import BeautifulSoup as bs import re# rooturl是传的是我需要查询和抓取的一个网址,可以是html js 等 def gethtml(rooturl, encoding"utf-8"):#默认解码方式utf-8response rq.get(rooturl)response.encoding encodin…...
AutoDL从0到1搭建stable-diffusion-webui
前言 AI绘画当前非常的火爆,随着Stable diffusion,Midjourney的出现将AI绘画推到顶端,各大行业均受其影响,离我们最近的AI绘画当属Stable diffusion,可本地化部署,只需电脑配备显卡即可完成AI绘画工作&…...
手动调整broker扩容后的旧topic分区
在broker扩容了两台机器之后,想让旧topic:quickstart76-events的分区也能铺满broker 1、创建一个topics-to-move.json json文件 $ vim topics-to-move.json json {"topics": [{"topic":"quickstart76-events"}],"v…...
【LeetCode-简单】剑指 Offer 25. 合并两个排序的链表(详解)
题目 入两个递增排序的链表,合并这两个链表并使新链表中的节点仍然是递增排序的。 示例1: 输入:1->2->4, 1->3->4 输出:1->1->2->3->4->4 本题与主站 21 题相同:力扣 题目地址&#x…...
Java版工程行业管理系统源码-专业的工程管理软件-em提供一站式服务
Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下: 首页 工作台:待办工作、消息通知、预警信息,点击可进入相应的列表 项目进度图表:选择(总体或单个)项目…...
【Spring】简化事件的使用,Spring提供了2种使用方式
Spring中事件可以配置顺序,利用线程池还可以做异步线程通知。怎么样使用事件?Spring简化事件的使用,Spring提供了2种使用方式:面向接口和面向EventListener注解。 1,面相接口的方式 案例 发布事件 需要先继承ApplicationEventP…...
探究Spring事务:了解失效场景及应对策略
在现代软件开发中,数据的一致性和完整性是至关重要的。为了保证这些特性,Spring框架提供了强大的事务管理机制,让开发者能够更加自信地处理数据库操作。然而,事务并非银弹,存在一些失效的情景,本文将带您深…...
Maven Manifold 条件编译
Maven 配置 通过 Maven 的不同 profile 实现不同环境传递不同符号。另外 lombok 可以 manifold 一同使用,见下方配置。 <properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.targ…...
4.数组与基本数学函数
一、数组 1.概念 数组是存放相同类型对象的容器,数组中存放的对象没有名字,而是要通过其所在的位置访问。数组中的每一个元素都相当于一个普通的变量,可以和普通变量一样进行赋值操作。 数组可以帮助我们批量地处理相同数据类型的相关数据…...
python与深度学习(十六):CNN和宝可梦模型二
目录 1. 说明2. 宝可梦模型的CNN模型测试2.1 导入相关库2.2 加载模型2.3 设置保存图片的路径2.4 加载图片2.5 数据处理和归一化2.6 对图片进行预测2.7 显示图片 3. 完整代码和显示结果4. 多张图片进行测试的完整代码以及结果 1. 说明 本篇文章是对上篇文章宝可梦模型训练的模型…...
PTA 1030 Travel Plan
个人学习记录,代码难免不尽人意。 A traveler’s map gives the distances between cities along the highways, together with the cost of each highway. Now you are supposed to write a program to help a traveler to decide the shortest path between his/h…...
MFC、Qt、WPF?该用哪个?
MFC、Qt和WPF都是流行的框架和工具,用于开发图形用户界面(GUI)应用程序。选择哪个框架取决于你的具体需求和偏好。MFC(Microsoft Foundation Class)是微软提供的框架,使用C编写,主要用于Windows…...
使用logback记录日志
1. Pom引用依赖 <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId> <version>1.2.11</version> </dependency> 2. logback.xml <?xml version"1.0" encoding"U…...
企业工程项目管理系统源码(三控:进度组织、质量安全、预算资金成本、二平台:招采、设计管理) em
工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#…...
【安装】XMind2022XMind2020安装教程(资源)
Xmind是一个制作思维导图很便利的软件。 1.资源链接 Xmind2022: 链接:https://pan.baidu.com/s/1j4DFedxxX2YJ3HBy1-MpHw?pwdxmin 提取码:xmin Xmind2020: 链接:https://pan.baidu.com/s/1wNqMApuy0yoBF2CvpBDpDA?pwdxmin 提取码&#x…...
Windows下QT Creator安装MinGW 32bit编译器
前言 注:本作者是基于FFmpeg开发需要,故在Windows下QT Creator中安装MinGW 32bit编译器!其它型号编译器参照此文章基本可以实现! 一、下载需要的编译器 1、下载链接 链接: 链接:https://pan.baidu.com/…...
Emacs之解决键值绑定冲突问题(一百二十三)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异,它们的数据同步要求既要保持数据的准确性和一致性,又要处理好性能问题。以下是一些主要的技术要点: 数据结构差异 数据类型差异ÿ…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端(Windows 使用 Git Bash,Mac/Linux 使用 Terminal)执行命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明: -t rsa&#x…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
Linux 中如何提取压缩文件 ?
Linux 是一种流行的开源操作系统,它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间,使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的,要在 …...
