【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…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展,AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术,在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
给网站添加live2d看板娘
给网站添加live2d看板娘 参考文献: stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下,文章也主…...
