当前位置: 首页 > news >正文

【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&#xff0c;将JSON字符串&#xff0c;解析为复杂类型。 比如&#xff0c;解析成如下类型&#xff1a; Map<String, List<Bean>> 依赖&#xff08;Gson&#xff09; <dependency><groupId>com.google.code.gson</groupId><art…...

伪彩色处理及算法

伪色彩(false color)是指将真实世界的中无法被肉眼观察到的色彩通过计算机或其他技术转换为可见光,从而使人们能够看到这些原本无法看到的色彩。这种技术被广泛应用于军事、医学、科研等领域。 在医学领域,伪色彩技术被用于医学影像诊断。例如,通过将不同灰度的图像映射到…...

Gradle-02:问题Plugin with id ‘maven‘ not found

1. 背景 在一次使用 Gradle 构建自己项目&#xff0c;完事&#xff0c;需要上传到本地 Maven 仓库&#xff0c;因为事先并不清楚 apply plugin: maven 插件已经被 Gradle 移除&#xff0c;找了一圈&#xff0c;才找到解决方案。 2. 原因 apply plugin: maven def localRepo f…...

jupyter lab环境配置

1.jupyterlab 使用虚拟环境 conda install ipykernelpython -m ipykernel install --user --name tf --display-name "tf" #例&#xff1a;环境名称tf2. jupyter lab kernel管理 show kernel list jupyter kernelspec listremove kernel jupyter kernelspec re…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

BLEU评分:机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...