前言
webpack 相关知识较为琐碎，学习起来需要静心。
本文基于 Webpack v5 文档和一些视频资料，记录一些基础配置、概念，完成 webpack 入门。
概念
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图 (dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
功能
webpack 本体功能是有限的：
开发模式：仅能编译 JS 中的 ES module 语法
生产模式：能编译 JS 中的 ES module 语法，还能压缩 JS 代码
创建简单工程
在一个空的目录下，执行命令：
1npm init -y
创建以下结构的项目：
1234567891011├─📁 dist├─📁 src│ ├─📁 css│ ├─📁 font│ ├─📁 img│ ├─📄 asset.d.ts│ └─📄 index.ts├─📄 index.html├─📄 pac ...
前提
在阅读本篇文章之前，你应该对 JS 的属性描述符有所了解，如果没有，欢迎你阅读我的这篇文章《JS 属性描述符》
场景
假设有以下的 HTML 代码描述一个页面：
12345678910111213141516171819202122232425262728293031323334353637<!DOCTYPE html><html lang="en"><head> <title>Demo 1</title> <meta charset="UTF-8"></head><body><div class="container"> <p id="name"></p> <p id="time"></p></div><script> const goods = { name: "苹果", price: 5.5, purchaseTime: "2025-01-01", ...
渲染时间点
还记得事件循环中，我们提到了渲染进程，并着重分析了渲染主线程、队列和其他线程的合作过程，要了解渲染时间点还需要网络进程以及它开启的网络线程。如下图：
上图即是：当浏览器的网络线程收到 HTML 文档后，产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
渲染流程
整个渲染流程分为多个阶段，分别是：HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画。
每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。
这样，整个渲染流程就形成了一套组织严密的生产流水线。如下图：
解析 HTML（Parse HTML）
渲染的第一步是解析 HTML。
解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和外部的 JS 文件。
如果主线程解析到 <link> 位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载 ...
浏览器的进程模型
什么是进程
程序运行需要拥有它自己的一块内存空间，可以简单的将这块内存空间理解为进程。
每个应用至少有一个进程，进程与进程之间相互独立，不同的进程之间需要通信，双方都必须同意。
什么是线程
有了进程，就可以运行程序的代码了。
运行代码的人就成为线程。一个进程至少有一个线程，所有进程在开启之后会自动的创建一个线程来运行代码，该线程称之为主线程。如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，即一个进程可以包含多个线程。
如果把进程理解为老板，那么线程就是这个老板所管的一个个车间。老板需求小能力小，那么车间可能就一个，能力大需求大，那么可能就会存在多个车间。
浏览器
浏览器是一个多进程多线程的应用程序。
像浏览器这种内部工作极其复杂的程序，为了减少一个崩溃引发连环崩溃的几率，浏览器会启动多个进程。比如浏览器进程、网络进程、渲染进程等等。
可以在浏览器的任务管理器中查看当前的所有进程
其中，最主要的进程有：
浏览器进程
主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
网络进程
负责加载网络资源。网络进程内 ...
场景引入
当前有一个对象，你需要对该对象进行封装。举例来说，对象可以是简单的商品对象数据：
12345678const goods = { pic: '/img/1.webp', title: 'simple title', desc: 'simple desc', sellNumber: 1, favorRate: 20, price: 20,};
自然的，你为了更方便的实现业务，会为它加上一些缺失的属性，比如选择的商品数量和总价，但是为了不更改原始对象数据 goods，所以你使用 class 来进行封装：
12345678910111213141516171819// 原始对象数据const goods = { pic: '/img/1.webp', title: 'simple title', desc: 'simple desc', sellNumber: 1, favorRate: 20, price: 20,};class Goods { constructor(goods) { this.data = goods; this.cho ...
前言
之前在使用 b 站的时候总是觉得不好用，于是四处寻找脚本、扩展优化 b 站的浏览体验（优化摸鱼体验）。其中，有一个叫 BewlyBewly 的扩展比较大幅度的更改了 b 站的 ui 设计（不过目前这个扩展在 GitHub 上已不再维护），它的一个切换主题效果就是 ripple 水波扩散式的切换动画，虽然以前在 Element-Plus 官方文档页也看到过，但是没时间没想法只想躺平，所以没做。今天就来将它应用到博客上。
预览
切换方向
动画目标
裁剪方向
视觉效果
light→dark
上层 light 快照
扩展→收缩
light 样式从点击处向内收缩消失
dark→light
下层 light 快照
收缩→扩展
light 样式从点击处向外扩展显现
View Transition API
ripple 水波动画使用到的 API 为 View Transition API，再加上一点 clip-path 裁剪效果就可以做到。
兼容性
目前（截止至 2025-07-22），View Transition API 兼容性如下：
动画 ...
平台：Windows11 pro 23H2
OBS 版本：31.0.3 (64bit)
OBS 全称为 Open Broadcaster Software，以下简称为 OBS。
它是一个开源免费的视频录制和直播软件，您可以在 Windows、Mac 或 Linux 上快速轻松地下载并开始直播或是录制视频。
安装
官网下载地址：https://obsproject.com/download
你也可以使用 Steam 安装，商店地址为：https://store.steampowered.com/app/1905180/OBS_Studio/
录制视频方案
由于我暂时还在使用 1k 显示器，所以对于传统的 1920x1080 分辨率，我新建配置文件并命名为 16:9录制。
在此场景源中新增三个采集源，即游戏采集、窗口采集、显示器采集；混音器新增麦克风采集。
点击左上角文件转到设置界面，左侧边栏选择输出，并将输出模式改为高级。现在，你将可以设置四个项目：
直播
录制
音频
回放缓存
直播的画质设置基本同录制视频一致，所以此处将介绍录制项目的具体配置。
录制
在录制选项中，将类 ...
物品组
前面我们成功向 MC 中添加了一个 Mod 物品，但是，它不像原版物品，还不存在于任何物品组中，你不能在创造模式轻易获取！有两种方式实现：
将物品添加到已存在的物品组
创建你自己的物品组并添加物品
不论是哪种，添加到任何物品组的物品都可以在创造模式物品栏中搜索到。
添加到已存在的物品组
首先，我们需要决定要添加到哪个物品组。那我怎么知道 MC 有哪几个物品组呢？我们可以通过查看源码来确定。双击 shift 唤出搜索面板，搜索 ItemGroups 类（搜索位置为所有位置，以后将不再赘述）：
这第一个来源为 net.minecraft.item 的（查看源码都是基于来源 minecraft，以后将不再赘述）就是我们需要查看的源码了：
对照表如下：
物品组
译
BUILDING_BLOCKS
建筑方块
COLORED_BLOCKS
染色方块
NATURAL
自然方块
FUNCTIONAL
功能方块
REDSTONE
红石方块
HOTBAR
已保存的快捷栏
SEARCH
搜索物品
TOOLS
工具与 ...
注册类别介绍
添加基本的物品是编写模组的第一步。基本逻辑是创建 Item 对象，注册，并提供纹理。要向物品添加其他行为，就需要编写自定义的 Item 类。
但在这之前，有必要了解一下 Minecraft 中常见的注册内容类别：
类型
Java 类
举例
说明
Item（物品）
net.minecraft.item.Item
铁锭、剑、药水
所有背包里的物体（不一定是方块）
Block（方块）
net.minecraft.block.Block
石头、熔炉、小麦地块
可以放在世界里的立体方块
BlockItem（方块物品）
net.minecraft.item.BlockItem
石头物品、栅栏物品
在背包中代表某个方块的 “物品形式”
Entity Type（实体）
EntityType<?>
僵尸、箭、村民
会动的东西（生物、投掷物）
Sound Event（声音事件）
SoundEvent
挖掘声、击中声
可播放的音效事件
Fluid（流体）
Fluid
水、岩浆、自定义油
可流动的液体类型
Enchantment（附魔 ...
前言
我重生了，上一世我没能坚持学习 Fabric Modding 导致未能幸存，这一世我要拿回属于我的一切😤
一直以来想学着做一个 mod 供自己玩，于是在此记录学习过程，鞭策自己学下去。
平台：Windows11
Java 版本：Java 21
Minecraft 版本：1.20.1
Git 版本：git version 2.50.1.windows.1
IDE：IntelliJ IDEA Community Edition 2025.1.3（以下将简称为 IDEA）
Fabric 模板项目
推荐使用 Fabric 官方提供的模板项目开始学习。你可以点击进行跳转：
Minecraft 版本为 1.20.1 并且在高级选项中，将 Data Generation 勾选上，取消勾选 Split client and common sources。Data Generation 能让我们可以构建合成配方等资源，取消勾选拆分客户端和服务端代码是因为，初学者基本搞不清哪部分是服务器端代码哪部分是客户端代码，之后我们将手动进行拆解。
下载下来将压缩包解压，将目录中的 LICENSE ...