【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…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
DAY 26 函数专题1
函数定义与参数知识点回顾:1. 函数的定义2. 变量作用域:局部变量和全局变量3. 函数的参数类型:位置参数、默认参数、不定参数4. 传递参数的手段:关键词参数5 题目1:计算圆的面积 任务: 编写一…...
ThreadLocal 源码
ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物,因为每个访问一个线程局部变量的线程(通过其 get 或 set 方法)都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段,这些类希望将…...
【java面试】微服务篇
【java面试】微服务篇 一、总体框架二、Springcloud(一)Springcloud五大组件(二)服务注册和发现1、Eureka2、Nacos (三)负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...
2025.6.9总结(利与弊)
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题,从一个接口人不断溯源到另一个 接口人。有时候,不知道是谁的责任填。将工作内容分的很细,每个人负责其中的一小块。我清楚的意识到,自己就是个可以随时替换的螺丝钉&…...
【技巧】dify前端源代码修改第一弹-增加tab页
回到目录 【技巧】dify前端源代码修改第一弹-增加tab页 尝试修改dify的前端源代码,在知识库增加一个tab页"HELLO WORLD",完成后的效果如下 [gif01] 1. 前端代码进入调试模式 参考 【部署】win10的wsl环境下启动dify的web前端服务 启动调试…...
解决MybatisPlus使用Druid1.2.11连接池查询PG数据库报Merge sql error的一种办法
目录 前言 一、问题重现 1、环境说明 2、重现步骤 3、错误信息 二、关于LATERAL 1、Lateral作用场景 2、在四至场景中使用 三、问题解决之道 1、源码追踪 2、关闭sql合并 3、改写处理SQL 四、总结 前言 在博客:【写在创作纪念日】基于SpringBoot和PostG…...
