【前端webpack5高级优化】源代码映射SourceMap

news/2024/4/19 17:04:28/

简介

开发时我们运行的代码是经过 webpack 编译后的,例如下面这个样子:

/** ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").* This devtool is neither made for production nor for readable output files.* It uses "eval()" calls to create a separate source file in the browser devtools.* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)* or disable the default devtool with "devtool: false".* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).*/
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/less/index.less":
/*!**********************************************************************************************************!*\!*** ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/less/index.less ***!\**********************************************************************************************************/
/***/ ((module, __webpack_exports__, __webpack_require__) => {eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \".box2 {\\n  width: 100px;\\n  height: 100px;\\n  background-color: deeppink;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://webpack5/./src/less/index.less?./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js");/***/ }),
// 其他省略

所有cssjs合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多,那么很难去发现错误出现在哪里。

所以我们需要更加准确的错误提示,来帮助我们更好的开发代码。

SourceMap(源代码映射)

SourceMap是一个用来生成源代码与构建后代码一一映射的文件的方案

它会生成一个xxx.map文件,里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了,会通过 xxx.map 文件,从构建后代码出错位置找到映射后源代码出错位置,从而让浏览器提示源代码文件出错位置,帮助我们更快的找到错误根源

使用SourceMap

通过查看webpack文档可知,SourceMap 的值有很多种情况

但实际开发时我们只需要关注两种情况即可:

开发模式:cheap-module-source-map

优点:打包编译速度快,只包含行映射
缺点:没有列映射

module.exports = {// 其他省略mode: "development",devtool: "cheap-module-source-map",
};

生产模式:source-map
加粗样式
优点:包含行/列映射
缺点:打包编译速度更慢

module.exports = {// 其他省略mode: "production",devtool: "source-map",
};

http://www.ppmy.cn/news/1405483.html

相关文章

香港科技大学广州|智能制造学域博士招生宣讲会—吉林大学专场

时间:2024年4月12日(星期五)14:00 地点:吉林大学前卫校区敬信教学楼-A107 报名链接:https://www.wjx.top/vm/mmukLPC.aspx# 宣讲嘉宾:汤凯 教授/学域主任 跨学科重点研究领域 •工业4.0 •智能传感器、…

Linux repo基本用法: 搭建自己的repo仓库[服务端]

概述 Repo的使用离不开Git, Git 和 Repo 都是版本控制工具,但它们在使用场景和功能上有明显区别… Git 定义:Git 是一个分布式的版本控制系统,由 Linus Torvalds 为 Linux 内核开发而设计,现已成为世界上最流行的版本控制软件之…

云计算对象存储服务

对象存储服务(OSS)中的存储桶(Bucket)叫做‘OBS桶 存储桶(Bucket):存储桶式对象存储服务中用于存储对象的基本容器,类似于文件系统中的文件夹。每个存储桶具有唯一的名称,并且可以在桶中存储任…

谈谈你对 ES6 的理解

es6 是一个新的标准,它包含了许多新的语言特性和库,是 JS 最实质性的一次升级。 比如箭头函数、字符串模板、generators(生成器)、async/await、解构赋值、class等等,还有就是引入 module 模块的概念。 箭头函数可以让 this 指向固定化&…

计算机网络:数据链路层 - 点对点协议PPP

计算机网络:数据链路层 - 点对点协议PPP PPP协议的帧格式透明传输字节填充法零比特填充法 差错检测循环冗余校验 对于点对点链路,PPP协议是目前使用最广泛的数据链路层协议。比如说,当用户想要接入互联网,就需要通过因特网服务提供…

windows qt打包保姆级教学

windows qt打包保姆级教学 简述打包打包进阶 简述 在windows下开发的qt程序,想在其他windows计算机上运行,而那个计算机没有qt环境,执行时候会报错各种dll找不到,那么就需要将自己开发的qt程序和用到的库打包。 打包 这里先编译…

图论基础(python蓝桥杯)

图的基本概念 图的种类 怎么存放图呢? 优化 DFS 不是最快/最好的路,但是能找到一条连通的道路。(判断两点之间是不是连通的) 蓝桥3891 import os import sys sys.setrecursionlimit(100000) # 请在此输入您的代码 n, m map(int,…

基于单片机按键控制看门狗仿真设计

**单片机设计介绍,基于单片机按键控制看门狗仿真设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机按键控制看门狗仿真设计概要主要涉及利用单片机上的按键来控制看门狗的功能,从而实现系统故障的及时检…

LeetCode-146. LRU 缓存【设计 哈希表 链表 双向链表】

LeetCode-146. LRU 缓存【设计 哈希表 链表 双向链表】 题目描述:解题思路一:双向链表,函数 get 和 put 必须以 O(1) 的平均时间复杂度运行。一张图:知识点__slots__ 解题思路二:0解题思路三:0 题目描述&am…

Maven入门指南:构建与管理Java项目的利器

引言 在Java开发领域,项目构建和管理是一个至关重要的环节。随着项目规模和复杂度的不断增加,有效地管理项目的依赖、构建过程以及部署流程变得尤为关键。在这样的背景下,Apache Maven作为一款优秀的项目管理工具应运而生,成为了…

STC8H8K64U 学习笔记 - 基础代码

STC8H8K64U 学习笔记 - 基础代码 环境说明引脚说明 基础代码电动马达蜂鸣器小蓝灯LED 灯走马灯来回灯流水灯流水逐灭灯相遇灯 独立按键 串口串口接收查询按键反馈 环境说明 该内容仅针对我自己学习的开发板做的笔记,在实际开发中需要针对目标电路板的原理图进行针对…

使用浏览器打开本地的exe程序并传递参数

使用浏览器打开本地的exe程序并传递参数 html文件 其中OpenProgramByBroswer: 为协议名称&#xff0c;名称后面要跟上英文的冒号。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&…

【讲解下Gitea】

&#x1f308;个人主页:程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

基于Springboot + MySQL + Vue 大学新生宿舍管理系统 (含源码)

目录 &#x1f4da; 前言 &#x1f4d1;摘要 &#x1f4d1;操作流程 &#x1f4da; 系统架构设计 &#x1f4da; 数据库设计 &#x1f4ac; 管理员信息属性 &#x1f4ac; 学生信息实体属性 &#x1f4ac; 宿舍安排信息实体属性 &#x1f4ac; 卫生检查信息实体属性 &…

使用vuepress搭建个人的博客(一):基础构建

前言 vuepress是一个构建静态资源网站的库 地址:VuePress 一般来说,这个框架非常适合构建个人技术博客,你只需要把自己写好的markdown文档准备好,完成对应的配置就可以了 搭建 初始化和引入 创建文件夹press-blog npm初始化 npm init 引入包 npm install -D vuepress…

docker安装rabbitMQ,并且创建账号

# 创建docker容器启动,挂到后台运行 docker run -d --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:3.13-management # 打开防火墙 sudo firewall-cmd --zonepublic --add-port5672/tcp --permanent sudo firewall-cmd --zonepublic --add-port15672/tcp --permanent s…

P2089 烤鸡——Python解答

题目背景 猪猪 Hanke 得到了一只鸡。 题目描述 猪猪 Hanke 特别喜欢吃烤鸡&#xff08;本是同畜牲&#xff0c;相煎何太急&#xff01;&#xff09;Hanke 吃鸡很特别&#xff0c;为什么特别呢&#xff1f;因为他有 1010 种配料&#xff08;芥末、孜然等&#xff09;&#xf…

【电路笔记】-逻辑与门

逻辑与门 文章目录 逻辑与门1、概述2、2 输入晶体管与门3、数字与门类型4、7408 四路 2 输入与门逻辑与门是一种数字逻辑电路,仅当其所有输入均为高电平时,其输出才会变为高电平至逻辑电平 1。 1、概述 数字逻辑与门的输出状态仅在其任何输入处于逻辑电平“0”时再次返回“低…

知识图谱在五大智能领域的应用

知识图谱是一种新型的图数据模型&#xff0c;其核心思想是&#xff1a;通过实体和关系来描述一个数据集&#xff0c;而不是像传统关系数据库那样&#xff0c;将数据存储在不同的数据库中&#xff0c;而是可以让用户对数据进行检索和分析。知识图谱通过三元组&#xff08;实体、…

Linux提权!!!

上一篇文章讲了Windows的提权&#xff0c;那么这篇文章就来讲一下Linux的提权 1.SUID提权 suid权限 作用&#xff1a;让普通用户临时拥有该文件的属主的执行权限&#xff0c;suid权限只能应用在二进制可执行文件&#xff08;命令&#xff09;上&#xff0c;而且suid权限只能设置…