模块化原理: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工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级
在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
【Redis】笔记|第8节|大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点: 多级缓存,先查本地缓存,再查Redis,最后才查数据库热点数据重建逻辑使用分布式锁,二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
C#学习第29天:表达式树(Expression Trees)
目录 什么是表达式树? 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持: 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...
MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生?别怕,教你轻松起飞! 最近Homebrew更新至最新版,每次执行 brew 命令时都会自动从官方地址 https://formulae.…...
Qt的学习(二)
1. 创建Hello Word 两种方式,实现helloworld: 1.通过图形化的方式,在界面上创建出一个控件,显示helloworld 2.通过纯代码的方式,通过编写代码,在界面上创建控件, 显示hello world; …...
