【webpack】一些零碎的知识点记录:eslint配置、source-map配置、devServer配置
文章目录
- 前言
- eslint
- 安装
- 配置
- 设置规则
- devtool设置js.map文件
- 使用
- 模式解释
- 文件说明
- 建议方案
- devServer
- 安装
- 配置
前言
有些知识点不知道咋归类,就先暂时放在同一个文章里了。这里只记录配置方式,配置的东西是什么就不过多解释了,因为一般需要配置这些东西的也都了解是什么了。
eslint
一般在用cli创建vue工程或者cra创建react工程的时候,会默认帮你安装,webpack会自动帮你配置好,我也比较推荐这种形式。
但是要是没有也没关系,自己重新添加即可。
安装
npm i eslint-loader eslint -D
同时还需要一个代码规范库,这里例子选用airbub,我们选择不包含react规范的eslint-config-airbub-base,这个库也需要另外的插件支持eslint-plugin-import。
npm i eslint-config-airbub-base eslint-plugin-import -D
配置
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {module: {rules: [{test: /\.js$/,exclude: /node_modules/, // 排除对第三方库的检查loader: 'eslint-loader',options: {fix: true, // 开启自动修复}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html' })]
}
设置规则
可以在package.json中eslintConfig中设置:
{"eslintConfig" : {"extends": "airbub-base" // 继承我们安装的airbub}
}
devtool设置js.map文件
这是啥就不解释了
使用
module.exports = {devtool: 'source-map'
}
模式解释
可以配置很多种模式,但我只记录我认为有用的模式,不增加心智负担
- source-map:生成js.map文件,让压缩后的代码在控制台查看起来和源码差不多,方便定位问题
- nosources-source-map:生成js.map文件,此时如果报错了,只会和你说在源码哪个位置报错(类似index.js7:2),但是你无法查看代码文件,因为map文件不给你看。
不写devtool,直接就不生成map文件了
文件说明
js.map文件一般都是很大的,因为你的工程代码量很多,但有些东西是固定的,可以说说:
内容整理来自https://www.python100.com/html/4WMO9FF4328L.html
{"version": 3, // 指定map文件版本"file": "script.min.js", // 压缩后的代码文件名"sourceRoot": "", // 源文件的根路径"sources": [ // 压缩前的文件名数组,用来指定map文件中各个部分对应的源代码"script.js"],"names": [], // 指定各个变量和函数名的数组。这在调试的时候可以通过map来查看变量和函数名称"mappings": ";;AAAA,GAAIA,IAAIC,MAAY,CAAZ,KAAK,EAAE;CCAgBF,EAAE,KAAK", // 压缩后的代码和源代码对应的具体位置。这是一个非常复杂的字符串,它通过映射的方式来指定压缩后的代码和原始代码之间的对应关系"sourcesContent": [ // 每个文件的原始代码"console.log(\"hello world\");"]
}
了解就行了,一般也不会去细看map文件
建议方案
我的建议是开发环境开启,但生产环境为了代码安全,还是选择关闭。
但是咧,这样排查生产环境问题就会很麻烦了,难以定位到错误,所以生产的要单独一个方案处理。
我看到的基本都是采用监控的方式,可以看看这篇文章:生产上的问题你不会用 sourcemap 定位吗?
devServer
一般在用cli创建vue工程或者cra创建react工程的时候,会默认帮你安装,webpack会自动帮你配置好,我也比较推荐这种形式。
但是要是没有也没关系,自己重新添加即可。
安装
npm i webpack-dev-server
配置
一些默认就配置的很好的功能就不记录了,例如热刷新hot、开启gzip压缩compress等
module.exports = {devServer: {open: true, // 项目启动后默认打开网址port: 8081, // 端口号proxy: { // 代理请求服务'/api': { // 识别符号target: 'https://mock.mengxuegu.com/mock/64cc976f686aea63fd6b58d9/ui-collection', // 替换的目标地址pathRewrite: { // 这里可以把地址修改// 去掉api'^/api': '/',},},},server: 'https', // 强行用https请求,慎用}
}
相关文章:
【webpack】一些零碎的知识点记录:eslint配置、source-map配置、devServer配置
文章目录 前言eslint安装配置设置规则 devtool设置js.map文件使用模式解释文件说明建议方案 devServer安装配置 前言 有些知识点不知道咋归类,就先暂时放在同一个文章里了。这里只记录配置方式,配置的东西是什么就不过多解释了,因为一般需要…...
VUE之JWT前后端分离认证,学生管理系统
参考资料: SpringBoot搭建教程 SpringCloud搭建教程 JWT视频教程 JWT官网 Vue视频教程 JWT视频参考资料、VUE视频资料,及前后端demo 特别有参考价值的JWT博客1 特别有参考价值的JWT博客2 cookie、localstorage和sessionStorage的区别1 cookie、localstorage和sessi…...
Go学习第五天
Golang中面向对象类的表示与封装 package mainimport "fmt"// 如果类名首字母大写,表示其他包也能够访问 type Hero struct {// 如果类的属性首字母大写,表示该属性是对外能够访问的,否则的话只能够类的内部访问Name stringAd …...
在vue项目中封装WebSockets请求
在Vue项目中封装WebSocket请求包括以下步骤: 1. 安装WebSocket库:首先,导入WebSocket库,例如vue-native-websocket或socket.io-client。根据项目需求选择适当的库,并根据官方文档进行安装和配置。 2. 创建WebSocket服务…...
Linux进程(二)
文章目录 进程(二)Linux的进程状态R (running)运行态S (sleeping)阻塞状态D (disk sleep)深度睡眠T(stopped)状态X(dead)状态Z&#x…...
使用pg_prewarm缓存PostgreSQL数据库表
pg_prewarm pg_prewarm 直接利用系统缓存的代码,对操作系统发出异步prefetch请求,在应用中,尤其在OLAP的情况下,对于大表的分析等等是非常耗费查询的时间的,而即使我们使用select table的方式,这张表也并不可能将所有…...
LeetCode 28题:找出字符串中第一个匹配项的下标
题目 给你两个字符串 haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标(下标从 0 开始)。如果 needle 不是 haystack 的一部分,则返回 -1 。 示例 1: 输入:haystac…...
flink+kafka+doris+springboot集成例子
目录 一、例子说明 1.1、概述 1.1、所需环境 1.2、执行流程 二、部署环境 2.1、中间件部署 2.1.1部署kakfa 2.1.1.1 上传解压kafka安装包 2.1.1.2 修改zookeeper.properties 2.1.1.3 修改server.properties 2.1.1.3 启动kafka 2.1.2、部署flink 2.1.2.1 上传解压f…...
ARM裸机-14(S5PV210的时钟系统)
1、时钟系统 1.1、什么是时钟 时钟是同步工作系统的同步节拍 1.2、SoC为什么需要时钟 Soc内部有很多器件,例如CPU、串口、DRAM控制制器、GPIO等内部外设,这些东西要彼此协同工作,需要一个同步的时钟系统来指挥。这个就是我们SoC的时钟系统。…...
Milvus Cloud凭借AI原生,可视化优势荣登全球向量数据库性能排行榜VectorDBBench.com 榜首
在当今的大数据时代,随着人工智能技术的快速发展,向量数据库作为处理大规模数据的关键工具,其性能和效率越来越受到关注。最近,全球向量数据库性能排行榜 VectorDBBench.com 公布了一份最新的评估报告,引人瞩目的是,成立不到一年的新兴公司 Milvus Cloud 凭借其 AI 原生和…...
测试岗?从功能测试进阶自动化测试开发,测试之路不迷茫...
目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 测试新人在想什么…...
算法与数据结构(五)--树【1】树与二叉树是什么
一.树的定义 树是一个具有层次结构的集合,是由一个有限集和集合上定义的一种层次结构关系构成的。不同于线性表,树并不是线性的,而是有分支的。 树(Tree)是n(n>0)个结点的有限集。 若n0&…...
打开的idea项目maven不生效
方法一:CtrlshiftA(或者help---->find action), 输入maven, 点击add maven projects,选择本项目中的pom.xml配置文件,等待加载........ 方法二:view->tools windows->mave…...
kvm+qemu+libvirt管理虚机
virt-manager 图形化创建虚拟机 #virt-manager纳管远程kvm虚拟机 # 可以指定kvm虚机的ssh端口和virt-manager所在主机的私钥 virt-manager -c qemussh://root10.197.115.17:5555/system?keyfileid_rsa --no-fork # 如果你生成的ssh-key 的名称是 test-key,在/home/ssh-key/ 目…...
电气防火限流式保护器在汽车充电桩使用上的作用
【摘要】 随着电动汽车行业的不断发展,电动汽车充电设施的使用会变得越来越频繁和广泛。根据中汽协数据显示,2022年上半年,我国新能源汽车产销分别完成266.1万辆和260万辆,同比均增长1.2倍,市场渗透率达21.6%。因此,电动汽车的安全…...
VBA技术资料MF38:VBA_在Excel中隐藏公式
【分享成果,随喜正能量】佛祖也无能为力的四件事:第一,因果不可改,自因自果,别人是代替不了的;第二,智慧不可赐,任何人要开智慧,离不开自身的磨练;第三&#…...
Gson:解析JSON为复杂对象:TypeToken
需求 通过Gson,将JSON字符串,解析为复杂类型。 比如,解析成如下类型: Map<String, List<Bean>> 依赖(Gson) <dependency><groupId>com.google.code.gson</groupId><art…...
伪彩色处理及算法
伪色彩(false color)是指将真实世界的中无法被肉眼观察到的色彩通过计算机或其他技术转换为可见光,从而使人们能够看到这些原本无法看到的色彩。这种技术被广泛应用于军事、医学、科研等领域。 在医学领域,伪色彩技术被用于医学影像诊断。例如,通过将不同灰度的图像映射到…...
Gradle-02:问题Plugin with id ‘maven‘ not found
1. 背景 在一次使用 Gradle 构建自己项目,完事,需要上传到本地 Maven 仓库,因为事先并不清楚 apply plugin: maven 插件已经被 Gradle 移除,找了一圈,才找到解决方案。 2. 原因 apply plugin: maven def localRepo f…...
jupyter lab环境配置
1.jupyterlab 使用虚拟环境 conda install ipykernelpython -m ipykernel install --user --name tf --display-name "tf" #例:环境名称tf2. jupyter lab kernel管理 show kernel list jupyter kernelspec listremove kernel jupyter kernelspec re…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
【Linux】Linux 系统默认的目录及作用说明
博主介绍:✌全网粉丝23W,CSDN博客专家、Java领域优质创作者,掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围:SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下…...
Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践
前言:本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中,跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南,你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案,并结合内网…...
基于单片机的宠物屋智能系统设计与实现(论文+源码)
本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢,连接红外测温传感器,可实时精准捕捉宠物体温变化,以便及时发现健康异常;水位检测传感器时刻监测饮用水余量,防止宠物…...
