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

Webpack学习笔记（6）

news 来源：原创 2025/7/20 12:21:21

首先搭建一个基本的webpack环境：

执行npm init -y，创建pack.json，保存安装包的一些信息

执行npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D，出现node_modules和package-lock.json。

1.source-Map（dev-tool）

  • 开发环境建议使用cheap-module-source-map;
  • 生产环境下不建议使用source-map;

2.devServer

在开发环境下启动一个web服务，模拟一个用户从浏览器访问我们web服务器的样子，可以读取我们打包的产物，webpack内置了这个功能。

3.模块热替换与热加载（提高调试效率）

模块热替换：在应用程序运行过程中，替换、添加或删除模块，无需重新加载整个页面。

模块热加载：在修改一个模块时，webpack会帮助我们自动刷新浏览器。

js文件需要手工打开热替换：

像vue、react会默认增加，不需要手动增加。

4.Eslint

eslint是用来扫描我们所写的代码是否符合规范的工具，往往项目是多人协作的，期望使用统一的代码规范，否则每个人的代码规范都不一样，可能会产生错误。

npm init -y创建一个package.json

npm install eslint -D

npx eslint --init配置后生成.eslintrc.json

  • env:脚本的运行环境；
  • extends：配置了airbnb-base扩展，帮助我们检查代码格式；
  • parserOptions：ecmaVersion版本12
  • rules：配置一写规则；
  • globals：执行脚本期间，访问额外的全局变量，不在这个环境中定义的变量。

安装扩展eslint可以检查哪个位置不满足eslint。

5.git-hooks与husky7

为了保证代码符合规范，我们往往想要在提交到git仓库时再去校验，使用husky来实现。

创建一个文件.gitgnore，在这个文件下定义在提交git时不需要提交的，比如node_modules

**/node_modules

git status当前git的状态

cd .git

ls -la

cd hooks

ls -la

.sample文件都是git的hook，hook就是在执行git之前或之后需要运行的一些命令

若我们想要在提交git之前运行一下eslint校验代码，可以在pre-commit.sample这个hook钩子中配置：

cat pre-commit.sample

重新创建：touch pre-commit

ls -la

vim pre-commit，按i插入，写入npx eslint ./src按esc+:wq退出

在运行git时会进行校验。

若把配置放在.git中每个人都不一样，所以需要把配置放在根目录下才有效。

git config core.hooksPath .mygithooks

chmod +x .mygithooks/pre-commit，增加写的权限。

使用husky

安装husky:npm install husky -D

npx husky install生成.husky文件夹

package.json配脚本：

在.husky文件下新建一个pre-commit写一句npx eslint ./src

增加权限：chmod +x .husky/pre-commit

git add.     git commit -m ‘备注’     会实现代码检查 

相关文章：

Webpack学习笔记（6）

首先搭建一个基本的webpack环境： 执行npm init -y，创建pack.json，保存安装包的一些信息 执行npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D，出现node_modules和package-lock.json。 1.source-Ma…...

编程日记 2025/7/20 12:21:21

数仓建模：如何进行实体建模？

目录 1 如何进行实体建模？ 业务建模 领域建模 逻辑建模 2 实体建模具体步骤 需求分析...

编程日记 2025/7/20 12:05:22

C++ 设计模式：享元模式（Flyweight Pattern）

链接：C 设计模式 链接：C 设计模式 - 单例模式 享元模式（Flyweight Pattern）是一种结构型设计模式，它通过共享尽可能多的相同对象来减少内存使用和提高性能。享元模式适用于大量细粒度对象的场景，这些对象之…...

编程日记 2025/7/20 12:02:49

idea报错：There is not enough memory to perform the requested operation.

文章目录 一、问题描述二、先解决三、后原因（了解） 一、问题描述 就是在使用 IDEA 写代码时，IDEA 可能会弹一个窗，大概提示你目前使用的 IDEA 内存不足，其实就是提醒你 JVM 的内存不够了，需要重新分配。弹…...

编程日记 2025/7/20 12:17:31

Kubernetes Gateway API-2-跨命名空间路由

1 跨命名空间路由 Gateway API 具有跨命名空间路由的核心支持。当多个用户或团队共享底层网络基础设施时，这很有用，但必须对控制和配置进行分段，以尽量减少访问和容错域。 Gateway 和 Route(HTTPRoute,TCPRoute,GRPCRoute) 可以部署到不同的命名空间中，路由可以跨命名空间…...

编程日记 2025/7/15 11:29:36

【视觉SLAM:四、相机与图像】

相机模型 相机模型是计算机视觉中的重要内容，用于描述真实相机如何将三维世界投影到二维图像平面。以下从多个角度介绍常见的相机模型。 针孔相机模型 针孔相机模型是最简单的相机模型，用数学公式描述从三维世界到二维图像平面的映射关系。核心公式如…...

编程日记 2025/7/20 12:04:17

【spring】参数校验Validation

前言 在实际开发中，我们无法保证客户端传来的请求都是合法的。比如一些要求必传的参数没有传递，传来的参数长度不符合要求等，这种时候如果放任不管，继续执行后续业务逻辑，很有可能就会出现意想不到的bug。 有人可能会…...

编程日记 2025/7/20 10:30:20

基于 InternLM 和 LangChain 搭建你的知识库

本文基于InternStudio 算力平台利用 InternLM 和 LangChain 搭建知识库。 InternStudio (OpenAIDE)[1] 是面向算法开发者与研究员的云端集成开发环境。基于「容器实例」，「镜像中心」，「分布式训练」，「公开数据集」模块为用户提供 “算力、算…...

编程日记 2025/7/20 12:16:16

C++ 设计模式：备忘录模式（Memento Pattern）

链接：C 设计模式 链接：C 设计模式 - 状态模式 备忘录模式（Memento Pattern）是一种行为设计模式，它允许在不破坏封装性的前提下捕获和恢复对象的内部状态。这个模式在需要保存和恢复对象状态的场景中非常有用&#xff…...

编程日记 2025/7/17 19:58:32

STM32配合可编程加密芯片SMEC88ST的防抄板加密方案设计

SMEC88ST SDK开发包下载 目前市场上很多嵌入式产品方案都是可以破解复制的，主要是因为方案主芯片不具备防破解的功能，这就导致开发者投入大量精力、财力开发的新产品一上市就被别人复制，到市场上的只能以价格竞争，最后工厂复制的产…...

编程日记 2025/7/16 14:09:51

利用JavaScript实现猜数字

一，使用while循环实现 以下代码为固定数字非随机数，答案通过弹窗来设置，结果太唯一。 let number;while (true) {number prompt(我正在想一个1-10的数字,你猜猜看？);switch (number) {case "1":alert("小了&quo…...

编程日记 2025/7/16 8:30:10

terminal_学习

参考： 让你的 Mac 提前用上 macOS Catalina 的 Shell——Oh My Zsh 配置指南 https://sspai.com/post/55176MAC 终端美化教程（来个全套 ）https://blog.csdn.net/weixin_42326144/article/details/121957795 x.1 zsh做美化（安装oh…...

编程日记 2025/7/20 1:17:40

MongoDB 管理工具

关于 MongoDB 的管理工具，目前市面上有多款优秀的 GUI 工具可供选择。这些工具旨在提高 MongoDB 的开发和管理效率，使得数据库操作更加便捷和高效。以下是一些推荐的工具： MongoDB Compass：这是 MongoDB 官方提供的一款 GUI 管理工…...

编程日记 2025/7/20 12:19:08

46. Three.js案例-创建颜色不断变化的立方体模型

46. Three.js案例-创建颜色不断变化的立方体模型 实现效果 知识点 Three.js基础组件 WebGLRenderer THREE.WebGLRenderer是Three.js提供的用于渲染场景的WebGL渲染器。它支持抗锯齿处理，可以设置渲染器的大小和背景颜色。 构造器 antialias: 是否开启抗锯齿&am…...

编程日记 2025/7/17 10:31:15

机器学习-高斯混合模型

文章目录 高斯混合模型对无标签的数据集：使用高斯混合模型进行聚类对有标签的数据集：使用高斯混合模型进行分类总结实战 高斯混合模型 对无标签的数据集：使用高斯混合模型进行聚类 对有标签的数据集：使用高斯混合模型进行分类 总结…...

编程日记 2025/7/14 22:42:32

Linux官文转载-- Linux 内核代码风格

Warning 此文件的目的是为让中文读者更容易阅读和理解，而不是作为一个分支。 因此， 如果您对此文件有任何意见或更新，请先尝试更新原始英文文件。 这是一个简短的文档，描述了 linux 内核的首选代码风格。代码风格是因人而异的&a…...

编程日记 2025/7/17 7:44:35

通过无障碍服务(AccessibilityService)实现Android设备全局水印显示

一、无障碍功能简介 首先我们先来了解下无障碍功能的官方介绍： 无障碍服务仅应用于帮助残障用户使用 Android 设备和应用。它们在后台运行，并在触发 AccessibilityEvents 时接收系统的回调。此类事件表示用户界面中的某些状态转换，例如焦点已…...

编程日记 2025/7/20 1:31:25

Dockerfile基础指令

1.FROM 基于基准镜像（建议使用官方提供的镜像作为基准镜像，相对安全一些） 举例： 制作基准镜像（基于centos:lastest） FROM cenots 不依赖于任何基准镜像 FROM scratch 依赖于9.0.22版本的tomcat镜像 FROM…...

编程日记 2025/7/18 16:11:47

rocketmq5源码系列--（二）--生产者发送消息

这是broker源码系列第一篇。还是和往常一样，建议copy到本地阅读 broker是基于netty的 rocketmq队列分物理队列和逻辑队列，物理队列只有一个而逻辑队列有很多个 rocketmq 物理队列，一个物理队列对应一个文件，一个物理队列可以对…...

编程日记 2025/7/15 13:42:18

uniapp从入门到精通（全网保姆式教程）~ 别再说你不会开发小程序了

目录 一、介绍 二、环境搭建（hello world） 2.1 下载HBuilderX 2.2 下载微信开发者工具 2.3 创建uniapp项目 2.4 在浏览器运行 2.5 在微信开发者工具运行 2.6 在手机上运行 三、项目基本目录结构 四、开发规范概述 五、全局配置文件&#xff0…...

编程日记 2025/7/18 10:51:33

Kali 自动化换源脚本编写与使用

1. 背景与需求 在使用 Kali Linux 的过程中，软件源的配置对系统的更新与软件安装速度至关重要。 Kali 的默认官方源提供了安全且最新的软件包，但有时由于网络条件或地理位置的限制，使用官方源可能会出现速度较慢的问题。 为了解决这一问题&a…...

编程日记 2025/7/15 11:37:09

mysql-二进制安装方式

目录 1. 安装组件即依赖包 2. 创建用户 3. 关闭防火墙 4. 解压mysql二进制源码包 5. 创建文件夹并赋予权限 6. 编译安装mysql，安装完成最后面，会有一串英文，那是登录数据库的密码 7. 设置配置文件 8. 将mysql添加进环境变量 9. 复制…...

编程日记 2025/7/15 14:43:32

深入剖析Android SoundPool及其JNI实现

深入剖析Android SoundPool及其JNI实现 1. SoundPool概述 SoundPool是Android中用于管理和播放音频资源的类，特别适合播放短小的音效，如游戏中的爆炸声、按钮点击声等。与MediaPlayer相比，SoundPool具有以下优势： 低延迟：SoundPool适用于需要快速响应的音效播放。并发播…...

编程日记 2025/7/18 17:11:40

15_C语言 -构造类型

构造类型 数据类型 基本类型： 整型 short / short int（2字节）整型（默认） ：int（4字节）长整型：long / long int （8字节 （64位系统）&am…...

编程日记 2025/7/16 20:33:05

Python爬虫 - 豆瓣电影排行榜数据爬取、处理与存储

文章目录 前言一、使用版本二、需求分析1. 分析要爬取的内容1.1 分析要爬取的分类1.2 分析要爬取的单个电影的数据1.3 分析如何获取单个电影数据1.3.1 预览数据1.3.2 查看请求网址、方法及请求头信息1.3.3 查看请求参数 2. 数据用途2.1 统计分析2.2 探索性数据分析 (EDA)2.3 高…...

编程日记 2025/7/14 18:33:55

知识碎片-环境配置

1.添加-i 下载快： pip install onnxruntime-gpu==X.X.X -i https://pypi.tuna.tsinghua.edu.cn/simple 清华源 pip install xxx -i https://pypi.tuna.tsinghua.edu.cn/simple/ 阿里源 pip install xxx -i https://mirrors.aliyun.com/pypi/simple 中科大源 pip install xxx -…...

编程日记 2025/7/15 14:27:29

手机实时提取SIM卡打电话的信令声音-智能拨号器的SIP线路-双卡双待单通方案

手机实时提取SIM卡打电话的信令声音 --智能拨号器的SIP线路-双卡双待单通方案 一、前言 蓝牙电话的技术方案最初是从蓝牙耳机和车机蓝牙的使用领域延伸出来的技术方式。通过蓝牙的HFP协议，把手机通话的声音和通话事件状态提取出来进行复用和处理。但中国大陆现行…...

编程日记 2025/7/20 6:13:13

LangChain教程 - 表达式语言 (LCEL) -构建智能链

系列文章索引 LangChain教程 - 系列文章 LangChain提供了一种灵活且强大的表达式语言 (LangChain Expression Language, LCEL)，用于创建复杂的逻辑链。通过将不同的可运行对象组合起来，LCEL可以实现顺序链、嵌套链、并行链、路由以及动态构建等高级功能…...

编程日记 2025/7/14 7:47:11

pytorch学习笔记汇总

一.tensor创建 1.张量的定义 张量在形式上就是多维数组，例如标量就是0维张量，向量就是一维张量，矩阵就是二维张量，而三维张量就可以想象RGB图片，每个channel是一个二维的矩阵，共有三个channel&#xff0…...

编程日记 2025/7/15 1:29:10

uniapp配置文字艺术字体风格

1.vue配置 App.vue中&#xff1a; <style>/*每个页面公共css *//* 全局字体风格 */font-face {font-family: gufengFont;src: url(./static/font/gufeng.ttf) format(truetype);font-weight: normal;font-style: normal;} </style>页面中&#xff1a; .text1 {f…...

编程日记 2025/7/19 20:36:52

江科大学习笔记之——HAL库点亮一个LED灯

HAL三步走&#xff1a;1.建工程。2.设配置。3.写代码 一.建立工程 HAL库写法 点击FinIsh 2.配置时钟 2 、设置配置参数 把模块.C.h单独设置文件 生产代码 三写代码 控制GPIO就三步 1.RCC时钟使能 2.结构体配置GPIO寄存器 3.控制GPIO值 上面的步骤已经把前两步的配置完成了接下…...

编程日记 2025/7/18 4:21:53

java web项目软件自动生成使用初体验-帅帅软件生成平台ASoft

软件默认 登陆账号 admin 密码 123456 一、软件使用简介说 AI软件自动生成越来越成熟&#xff0c;但AI生成的软件代码只是片段化的&#xff0c;不成体系。有没有一款可以10-30分钟自动生成JAVA WEB休系的软件&#xff1f;我也找了好久&#xff0c;终于找到了&#xff0c;开发…...

编程日记 2025/7/15 1:07:18

损失函数-二分类和多分类

二分类和多分类的损失函数 二分类 损失函数 L ( y , y ^ ) − ( y l o g ( y ^ ) ) ( 1 − y ) l o g ( 1 − y ^ ) L(y,\hat{y}) -(ylog(\hat{y})) (1-y)log(1-\hat{y}) L(y,y^​)−(ylog(y^​))(1−y)log(1−y^​) 其中真实标签表示为y&#xff08;取值为 0 或 1&#…...

编程日记 2025/7/14 18:51:02

Springboot：后端接收数组形式参数

1、接收端写法 PermissionAnnotation(permissionName "",isCheckToken true)PostMapping("/batchDeleteByIds")public ReturnBean webPageSelf( NotNull(message "请选择要删除的单据&#xff01;") Long[] ids) {for (Long string : ids) {l…...

编程日记 2025/7/19 11:38:24

CSS系列（46）-- Color Functions详解

前端技术探索系列&#xff1a;CSS Color Functions详解 &#x1f3a8; 致读者&#xff1a;探索颜色函数的艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 CSS Color Functions&#xff0c;这个强大的颜色处理特性。 基础函数 &#x1f680; 颜色空间 /…...

编程日记 2025/7/14 17:11:38

MySQL数据库误删恢复_mysql 数据 误删

2、BigLog日志相关 2.1、检查biglog状态是否开启 声明: 当前为mysql版本5.7 当前为mysql版本5.7****当前为mysql版本5.7 2.1.1、Navicat工具执行 SHOW VARIABLES LIKE LOG_BIN%;OFF 是未开启状态&#xff0c;如果不是ON 开启状态需要开启为ON。{默认情况下就是关闭状态} 2.…...

编程日记 2025/7/20 5:47:26

ModiLeo交易平台：引领数字货币交易新未来

在当今数字化高速发展的时代&#xff0c;数字货币作为一种新兴的金融资产形式&#xff0c;正逐渐改变着全球金融格局。而此刻&#xff0c;由印度 ModiLeo 实验室联合全球顶级投行共同打造的全球领先的一站式数字货币交易平台——ModiLeo 即将上线&#xff0c;这无疑是数字货币领…...

编程日记 2025/7/18 9:42:31

57.插入区间 python

插入区间 题目题目描述示例 1&#xff1a;示例 2&#xff1a;提示&#xff1a; 题解解题思路python实现代码解释提交结果 题目 题目描述 给你一个 无重叠的 &#xff0c;按照区间起始端点排序的区间列表 intervals&#xff0c;其中 intervals[i] [starti, endi] 表示第 i 个…...

编程日记 2025/7/20 1:33:12

使用WebRTC进行视频通信

一、WebRTC技术简介 什么是WebRTC&#xff1f; 是一种支持浏览器之间实时音频、视频和数据传输的开放源代码项目。它允许开发者在不需要任何第三方插件或软件的情况下实现点对点的实时通信。WebRTC已经成为现代Web应用中的关键技术&#xff0c;为开发者提供了强大的工具和API…...

编程日记 2025/7/17 21:34:43

详细讲解axios封装与api接口封装管理

一、axios封装 axios是基于promise的http客户端&#xff0c;用于浏览器和nodejs发送http请求 &#xff0c;对它进行封装主要是为了统一管理请求配置和处理请求和响应的通用逻辑等。以下是常用的封装逻辑和要点 1&#xff1a;引入axios相关依赖 首先引用项目中的axios库&…...

编程日记 2025/7/19 11:37:41

likeAdmin架构部署（踩坑后的部署流程

1、gitee下载 https://gitee.com/likeadmin/likeadmin_java.git 自己克隆 2、项目注意 Maven&#xff1a;>3.8 ❤️.9 (最好不要3.9已经试过失败 node &#xff1a;node14 (不能是18 已经测试过包打不上去使用14的换源即可 JDK&#xff1a;JDK8 node 需要换源 npm c…...

编程日记 2025/7/14 22:26:33

算法-回文数判断

给你一个整数 x &#xff0c;如果 x 是一个回文整数&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 回文数 是指正序&#xff08;从左向右&#xff09;和倒序&#xff08;从右向左&#xff09;读都是一样的整数。 例如&#xff0c;121 是回文&#xff0c;…...

编程日记 2025/7/15 13:14:44

力扣-数据结构-7【算法学习day.78】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;建议灵神的题单和代码随想录&#xff09;和记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关…...

编程日记 2025/7/17 14:46:03

计算机组成原理的学习笔记(8)-- 指令系统·其一 指令的组成以及数据寻址方式/RISK和CISK

学习笔记 前言 ​ 本文主要是对于b站尚硅谷的计算机组成原理的学习笔记&#xff0c;仅用于学习交流。 1. 指令 1.1 组成 操作码&#xff08;Opcode&#xff09;&#xff1a;指指令中执行特定操作的部分。地址码&#xff1a;指令中用于指定操作数位置的部分。 1.2 扩展操作…...

编程日记 2025/7/16 4:42:15

Hive刷分区MSCK

一、MSCK刷分区 我们平时通常是通过alter table add partition方式增加Hive的分区的&#xff0c;但有时候会通过HDFS put/cp命令或flink、flum程序往表目录下拷贝分区目录&#xff0c;如果目录多&#xff0c;需要执行多条alter语句&#xff0c;非常麻烦。Hive提供了一个"…...

编程日记 2025/7/15 23:59:05

2024年12月HarmonyOS应用开发者基础认证全新题库

注意事项&#xff1a;切记在考试之外的设备上打开题库进行搜索&#xff0c;防止切屏三次考试自动结束&#xff0c;题目是乱序&#xff0c;每次考试&#xff0c;选项的顺序都不同&#xff0c;如果有两台电脑设备建议一台打开题库一台考试&#xff0c;如果只有一台电脑设备建议手…...

编程日记 2025/7/15 8:35:26

集成方案 | Docusign + 蓝凌 EKP，打造一站式合同管理平台，实现无缝协作！

本文将详细介绍 Docusign 与蓝凌 EKP 的集成步骤及其效果&#xff0c;并通过实际应用场景来展示 Docusign 的强大集成能力&#xff0c;以证明 Docusign 集成功能的高效性和实用性。 在当今数字化办公环境中&#xff0c;企业对于提高工作效率和提升用户体验的需求日益迫切。蓝凌…...

编程日记 2025/7/19 19:03:28

centos7 免安装mysql5.7及配置（支持多个mysql）

一&#xff09; 下载免安装包&#xff1a; mysql下载地址: https://dev.mysql.com/downloads/mysql/下载时&#xff0c;选择以前5.7版本&#xff1a; image 下载第一个TAR压缩包&#xff1a; image 二&#xff09; 定义安装路径并解压安装包 1、假设需要把MySQL放到 /usr/local…...

编程日记 2025/7/15 1:09:17

【若依框架】代码生成详细教程，15分钟搭建Springboot+Vue3前后端分离项目，基于Mysql8数据库和Redis5，管理后台前端基于Vue3和Element Plus，开发小程序数据后台

今天我们来借助若依来快速的搭建一个基于springboot的Java管理后台&#xff0c;后台网页使用vue3和 Element Plus来快速搭建。这里我们可以借助若依自动生成Java和vue3代码&#xff0c;这就是若依的强大之处&#xff0c;即便你不会Java和vue开发&#xff0c;只要跟着石头哥也可…...

编程日记 2025/7/14 0:56:41

什么是容器？

什么是容器&#xff1f; 容器是一种虚拟化技术&#xff0c;用于将应用程序及其所有依赖项打包在一起&#xff0c;以便在不同的计算环境中进行移植和运行。容器提供了一种隔离的运行环境&#xff0c;使不同应用程序能够在独立的文件系统、网络和进程空间等独立运行环境中运行&a…...

编程日记 2025/7/20 2:47:56