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

前端面经-webpack篇--定义、配置、构建流程、 Loader、Tree Shaking、懒加载与预加载、代码分割、 Plugin 机制

news 来源：原创 2025/5/11 11:40:10

看完本篇你将基本了解webpack！！！

一、Webpack 的作用

1、基本配置结构

2、配置项详解

1. entry —— 构建入口

2. output —— 输出配置

3. mode：模式设置

4. module：模块规则

5. plugins：插件机制

6. resolve：模块解析配置（可选）

7. devServer：开发服务器（可选）

8. devtool：调试工具（可选）

9. target：目标平台（可选）

二、构建流程

1. 初始化（Initialization）

1. 读取配置文件

2. 初始化 Compiler 对象

3. 注册所有插件（Plugin 注册阶段）

2. 构建模块图（Build Dependency Graph）

3. 模块转换与解析

示例 1：JS 文件（可能含 ES6、TS）

示例 2：CSS 文件

示例 3：图片文件

4. 生成代码块（Chunk）与文件（Asset）

1、 Chunk（代码块）

常见的 Chunk 类型：

🔁 举个例子

为什么要把代码分成多个 chunk？

1. 性能优化：

2. 缓存优化：

2、Asset（最终产出资源文件）

3. Chunk 转换为 Asset（ bundle）

4. 输出 Asset 到 output.path

5. 输出阶段（Emit）

三、插件机制

1、插件“注册”发生在 —— ✅ 初始化阶段（Initialization）

2、插件“执行”发生在 —— ✅ 构建过程的每一个阶段（Build Lifecycle）

3、compilation

1. 模块的管理

2. 构建 Chunk

3. 生成 Asset（输出资源）

4. Plugin 的生命周期钩子

四、配置项之间的相互关系

1. entry 与 module.rules

2. entry 与 output

3. module.rules 与 plugins

4. mode 与其他所有配置项

5. devServer 与 output

6. plugins 与 output

五、 Loader

1、什么是 Loader？

2、为什么需要 Loader？

3、常见 Loader 类型

1、什么是 babel-loader？

2、你为什么需要 babel-loader？

3、核心概念说明

4、常见用途

4、Webpack 如何调用 Loader？

六、构建优化与高级功能

1. 代码分割（Code Splitting）

2. Tree Shaking

Tree Shaking 的基本原理

3. 懒加载（Lazy Loading）与预加载

1、什么是懒加载（Lazy Loading）？

Webpack 如何实现懒加载？

2、什么是预加载（Preload）和预取（Prefetch）？

1. webpackPrefetch: true → 浏览器空闲时加载

2. webpackPreload: true → 当前帧就加载

一、Webpack 的作用

Webpack 的主要作用是：

模块打包：将多个模块（JS、CSS、图片等）打包成一个或多个文件。
代码拆分（Code Splitting）：根据需要拆分代码，提高首屏加载速度。
资源处理：处理 JS 之外的资源，如 CSS、LESS、SASS、图片、字体等。
开发工具支持：提供开发服务器、热更新（HMR）、调试等功能。
优化性能：压缩代码、Tree Shaking（去除无用代码）、懒加载等。

1、基本配置结构

// webpack.config.js
const path = require('path');module.exports = {entry: './src/index.js',            // 入口output: {                           // 输出filename: 'bundle.js',            // 输出文件名path: path.resolve(__dirname, 'dist') // 输出目录（必须是绝对路径）},module: {                           // 模块处理规则rules: [{test: /\.css$/,               // 正则匹配 .css 文件use: ['style-loader', 'css-loader'] // 使用的 loader，从右向左执行}]},plugins: [],                        // 插件列表mode: 'development'                 // 构建模式：development | production
};

在了解 Webpack 原理前，我们需要先了解几个核心名词的概念：

入口（Entry）：构建的起点。Webpack 从这里开始执行构建。通过 Entry 配置能够确定哪个文件作为构建过程的开始，进而识别出应用程序的依赖图谱。
模块（Module）：构成应用的单元。在 Webpack 的视角中，一切文件皆可视为模块，包括 JavaScript、CSS、图片或者是其他类型的文件。Webpack 从 Entry 出发，递归地构建出一个包含所有依赖文件的模块网络。
代码块（Chunk）：代码的集合体。Chunk 由模块合并而成，被用来优化输出文件的结构。Chunk 使得 Webpack 能够更灵活地组织和分割代码，支持代码的懒加载、拆分等高级功能。
加载器（Loader）：模块的转换器。Loader 让 Webpack 有能力去处理那些非 JavaScript 文件（Webpack 本身只理解 JavaScript）。通过 Loader，各种资源文件可以被转换为 Webpack 能够处理的模块，如将 CSS 转换为 JS 模块，或者将高版本的 JavaScript 转换为兼容性更好的形式（降级）。
插件（Plugin）：构建流程的参与者。Webpack 的构建流程中存在众多的事件钩子（hooks），Plugin 可以监听这些事件的触发，在触发时加入自定义的构建行为，如自动压缩打包后的文件、生成应用所需的 HTML 文件等。

2、配置项详解

1. `entry` —— 构建入口

指定 Webpack 构建的起点，支持多入口配置。

entry: './src/index.js'

作用：指定 Webpack 构建的起点文件，从这个文件出发递归分析所有依赖。

默认值是 './src/index.js'。
支持单入口（字符串）和多入口（对象形式）。

多入口示例：

entry: {
app: './src/app.js',
admin: './src/admin.js'
}

🔁 Webpack 会为每个入口分别打包生成输出文件。

2. `output` —— 输出配置

控制打包后的文件名称和路径。

作用：指定打包后文件的存储位置和命名规则。

filename：输出文件名，可包含占位符（如 [name], [contenthash]）
path：输出目录，必须是绝对路径

output: {
filename: 'bundle.js', // 输出的文件名
path: path.resolve(__dirname, 'dist') // 绝对路径
}
动态命名（用于多入口）：filename: '[name].[contenthash].js'

3. `mode`：模式设置

mode: 'development' // 或 'production'

作用：指定打包模式，Webpack 会自动启用对应的优化。

development：
- 开启调试（source map）
- 不压缩代码
- 提高构建速度
production：
- 自动压缩 JavaScript/CSS
- 启用 Tree Shaking（移除未使用代码）
- 更小体积、适合上线

4. `module`：模块规则

module: {
rules: [...]
}

作用：定义对不同模块（如 CSS、JS、图片等）的处理规则，核心由 rules 数组组成。

每条规则格式如下：

{
test: /\.css$/, // 正则匹配需要处理的文件类型
use: ['style-loader', 'css-loader'] // 使用的 loader（从右到左执行）
}

📌 常见 Loader：

文件类型	Loader 示例
JS	`babel-loader`
CSS	`css-loader`、`style-loader`
图片	`file-loader`、`url-loader`
字体	`file-loader`
Vue	`vue-loader`

5. `plugins`：插件机制

plugins: [new HtmlWebpackPlugin({template: './src/index.html'})
]

作用：扩展 Webpack 的功能，用于执行更复杂的构建任务。

📌 常用插件及作用：

插件名	作用
`HtmlWebpackPlugin`	自动生成 HTML 文件并注入打包资源
`CleanWebpackPlugin`	构建前自动清空输出目录
`MiniCssExtractPlugin`	提取 CSS 到单独文件
`DefinePlugin`	定义环境变量

6. `resolve`：模块解析配置（可选）

resolve: {extensions: ['.js', '.jsx', '.json']
}

作用：指定在导入模块时可省略的文件扩展名，提高模块查找效率。

📌 例如：import App from './App'
// 实际查找：./App.js -> ./App.jsx -> ./App.json

7. `devServer`：开发服务器（可选）

devServer: {static: './dist',port: 3000,hot: true
}

作用：启动本地开发服务器，支持热更新（HMR），提升开发效率。

HMR（Hot Module Replacement）是 Webpack 在开发环境下的一种“热更新”功能，允许你在不刷新页面的情况下替换、更新模块的内容。

配置说明：

static: 提供静态文件目录
port: 设置访问端口
hot: 启用热更新功能（无需刷新页面即可应用更改）

8. `devtool`：调试工具（可选）

devtool: 'source-map'

作用：生成 source map，帮助调试代码时映射到源码位置。

常用选项：

source-map：完整 source map，最详细（用于生产）
eval-source-map：快且可调试（用于开发）
none：关闭 source map

9. `target`：目标平台（可选）

作用：指定构建目标环境（浏览器 / Node.js）

target: 'web' // 或 'node'

二、构建流程

1. 初始化（Initialization）

读取配置文件（webpack.config.js）
初始化 Compiler（核心对象）
注册所有 plugin，进入生命周期钩子（基于 Tapable）

在 Webpack 中，存在两个非常重要的核心对象：compiler、compilation，它们的作用如下：

Compiler：Webpack 的核心，贯穿于整个构建周期。Compiler 封装了 Webpack 环境的全局配置，包括但不限于配置信息、输出路径等。
Compilation：表示单次的构建过程及其产出。与 Compiler 不同，Compilation 对象在每次构建中都是新创建的，描述了构建的具体过程，包括模块资源、编译后的产出资源、文件的变化，以及依赖关系的状态。在watch mode 下，每当文件变化触发重新构建时，都会生成一个新的 Compilation 实例。

Compiler 是一个长期存在的环境描述，贯穿整个 Webpack 运行周期；而 Compilation 是对单次构建的具体描述，每一次构建过程都可能有所不同。

1. 读取配置文件

Webpack 启动时会查找配置文件（默认是 webpack.config.js），并加载它。

支持的文件格式包括：

JavaScript (webpack.config.js)
TypeScript (webpack.config.ts)
JSON（部分字段）

Webpack 会执行配置文件的内容，读取其中的：

entry, output
module.rules
plugins
mode, devtool, resolve, 等等

📌 注意：Webpack 本质上会执行 require('./webpack.config.js')，所以你甚至可以在里面写 JS 逻辑（例如根据环境动态返回不同配置）。

2. 初始化 Compiler 对象

Webpack 内部会构造出一个核心对象： Compiler:const compiler = new Compiler(options);

这个对象是整个构建系统的“大脑”，包含：

所有用户配置
所有构建状态
所有钩子（事件系统）
所有模块、chunk、asset 的数据结构

📌 Compiler 不是随便一个类，它继承了 Tapable 类，内置了很多“生命周期钩子”。

例如：

compiler.hooks.run.tap(...)
compiler.hooks.emit.tap(...)
compiler.hooks.done.tap(...)

3. 注册所有插件（Plugin 注册阶段）

Webpack 执行 plugins 数组中每一个插件的 .apply() 方法，把插件“挂载”到 compiler 上。

const HtmlWebpackPlugin

前端面经-webpack篇--定义、配置、构建流程、 Loader、Tree Shaking、懒加载与预加载、代码分割、 Plugin 机制

看完本篇你将基本了解webpack！！！目录一、Webpack 的作用 1、基本配置结构 2、配置项详解 1. entry —— 构建入口 2. output —— 输出配置 3. mode：模式设置 4. module：模块规则 5. plugins：插件机制 6. resolve：模块解析配置（可选） 7. devServer：开发服务器…...

编程日记 2025/5/11 11:40:10

ES6函数、对象和面向对象扩展

函数扩展默认参数通用的写法： function func(a, b, ..., c 默认值c, d 默认值d, ...) {... }其中，需要注意的是，有默认值的尽量写在后面并且所有形参参数不允许重复申明。具体例子： function test() {return 13 }// 函数可…...

编程日记 2025/5/2 5:37:53

航空客户价值分析阶段性测验

航空公司客户价值分析学习目标学会怎么进行数据分析。掌握hive的使用方法。学会数据清洗和K-Means聚类算法。了解航空公司现状与客户价值分析任务描述面对激烈的市场竞争,各个航空公司都推出了更多的优惠来吸引客户。国内某航空公司面临着常旅客流失，竞争…...

编程日记 2025/5/2 5:37:53

纯html实现的json数据转csv文件

代码如下： <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>JSON转CSV转换器</tit…...

编程日记 2025/5/2 5:37:53

Windows 查看电脑是否插拔过U盘

1、按 “WinR” 组合键打开 “运行” 对话框，输入 “regedit” 并回车，打开注册表编辑器。 2、依次展开HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\USBSTOR注册表项，这里记录了所有已连接过的 USB 设备信息，包括 U 盘&am…...

编程日记 2025/5/2 5:37:52

VB.net序列化和反序列化的使用方法和实用场景

引言相信很多初学编程的人都会提出过这个疑问：“既然我的变量可以存在内存之中，那么是否也可以存在硬盘之中呢” 其实我想回答的是，完全可以而且方法不止一种，而今天讲的是序列化最经典的——二进制序列化由于序列化的部分已…...

编程日记 2025/5/2 5:37:51

kafka学习笔记（四、生产者（客户端）深入研究(二)——消费者协调器与_consumer_offsets剖析）

1.消费者协调器和组协调器如果消费者客户端中配置了多个分配策略，则多消费者的分区分配交由消费者协调器和组协调器来完成，他们之间使用一套组协调协议进行交互。 1.1.在均衡原理将全部消费者分成多个子集，每个消费者组的子集在服务中对…...

编程日记 2025/5/2 5:36:50

stm32基础001(串口)

文章目录通信的基本概念串行通信和并行通信单工，半双工和全双工串口的硬件连接 stm32的串口原理图CPU的芯片手册stm32串口的库函数实现通过串口实现printf函数使用中断实现串口的接收通信的基本概念串行通信和并行通信串行通信一个方向只有一个数据通道&#x…...

编程日记 2025/5/2 5:36:49

5G技术如何提升智能家居体验：让家更聪明，生活更智能

5G技术如何提升智能家居体验：让家更聪明，生活更智能一、引言：智能家居的新纪元近年来，智能家居已经逐渐走入我们的生活，家电、照明、安全设备、环境监控等产品，都在逐步实现智能化，让我们可以…...

编程日记 2025/5/2 5:35:48

在项目中如何对Map List等对象序列化及反序列化

我们知道，在自定义类中，若想完成序列化必须要实现Serializable接口。那么在实现后如何进行序列化呢？ 一.普通对象序列化： 1.首先我们要定义一个序列化所需要的工具类 ObjectMapper //定义序列化所需要的工具类转化机器…...

编程日记 2025/5/2 5:35:48

指针与算法的双人舞：蓝桥杯两道趣味题的降维打击

蓝桥杯奇趣挑战：如何用指针和算法“驯服”无序数组与环形迷宫？ 🎩 博客引言 "你是否有过这样的体验？面对一段看似混乱的数组，像解开一团纠缠的耳机线，想用最优雅的方式让它乖乖听话？又或者…...

编程日记 2025/5/2 5:35:47

C语言指针(2)

目录 1.指针运算 2.const修饰指针 3.野指针我们在上篇文章中初步了解了关于指针的基础内容，包括内存地址以及指针变量类型。这篇我们来讲关于指针的运算以及const修饰指针和野指针相关内容。 1. 指针运算指针的基本运算有三种，分别是: - 指针-…...

编程日记 2025/5/2 5:35:46

使用Python和Pandas实现的Azure Synapse Dedicated SQL pool权限检查与SQL生成用于IT审计

下面是使用 Python Pandas 来提取和展示 Azure Synapse Dedicated SQL Pool 中权限信息的完整过程，同时将其功能以自然语言描述，并自动构造所有权限设置的 SQL 语句： ✅ 步骤 1：从数据库读取权限信息我们从数据库中提取与用户、…...

编程日记 2025/5/9 15:03:04

Python基本语法(控制语句)

#控制语句 Python语言的控制语句和其他编程语言类似，常用的有if…else、while、for语句。案例2一7控制语句第1组代码，说明if-else语句： #1 print(\n1,if) x,y,z10,20,5 if x>y:print(x>y) else:print(x<y)输出结果: 1,if x<…...

编程日记 2025/5/2 5:34:44

Linux btop 使用教程

简介 btop 是一个基于终端的现代系统资源监控器，具有美观的图形界面、响应快、功能丰富等特点。它支持查看 CPU、内存、磁盘、网络、进程，并可以方便地筛选和管理进程。功能总览启动命令： btop界面分为以下几部分： CPU 区域…...

编程日记 2025/5/2 5:34:44

高并发场景下的MySQL生存指南

引言在2025年全球数字经济峰会上，阿里云披露其核心交易系统单日处理请求量突破万亿次，其中MySQL集群承载了78%的OLTP业务。这标志着数据库系统已进入百万级QPS时代，传统优化手段面临三大挑战： 一、硬件与架构优化：构…...

编程日记 2025/5/2 5:34:43

Ethan独立开发产品日报 | 2025-04-30

1. Daytona 安全且灵活的基础设施，用于运行你的人工智能生成代码。 Daytona Cloud重新定义了AI代理的基础设施，具备低于90毫秒的启动时间、原生性能和有状态执行能力，这些是传统云服务无法比拟的。您可以以前所未有的速度和灵活性来创建、管…...

编程日记 2025/5/2 5:34:41

Mysql常用函数解析

字符串函数 CONCAT(str1, str2, …) 将多个字符串连接成一个字符串。 SELECT CONCAT(Hello, , World); -- 输出: Hello WorldSUBSTRING(str, start, length) 截取字符串的子串（起始位置从1开始）。 SELECT SUBSTRING(MySQL, 3, 2); -- 输出: SQ…...

编程日记 2025/5/2 5:33:40

donet使用指定版本sdk

ps:来自微软官方方案,实测可行,就是在项目任意目录下在新建 global.json,并配置sdk版本 SDK 使用最新安装的版本 SDK 命令包括 dotnet new 和 dotnet run。 .NET CLI 必须为每个 dotnet 命令选择一个 SDK 版本。即使在以下情况下，它也会默认使用计算机上安装的最新…...

编程日记 2025/5/2 5:33:40

Android短信监控技术实现：合法合规的远程采集方案

一年经验的全栈程序员，目前头发健在，但不知道能撑多久。该项目已成功部署并稳定运行于企业生产环境，如需个性化定制方案，欢迎联系作者进行深度合作。文章目录前言一、页面设计 1.页面显示 2.代码实现二、具体代码实现 1.添加…...

编程日记 2025/5/2 5:32:38

前端项目实践：打造响应式个人简历与实时天气预报应用

在当今前端开发领域，构建实际项目是提升技能的最佳方式。本文将带你完成两个极具实用价值的前端项目：响应式个人简历页面和天气预报Web应用。这两个项目不仅能够丰富你的作品集，还能帮助你掌握现代前端开发的核心技术。一、响应式个人简历页…...

编程日记 2025/5/2 5:32:38

【C++】extern

本文介绍一些extern在C中的用法声明与定义分离 C程序员应该都知道单一定义规则ODR 在任何一个翻译单元中，只允许存在任何变量、函数、类类型、枚举类型、概念 (自 C20 起) 或模板的一个定义（其中一些可能具有多个声明，但只允许一个定义&a…...

编程日记 2025/5/2 5:32:37

力扣——23合并升序链表

目录 1:题目描述： 2.算法思想： 3.代码展示： 1:题目描述： 给你一个链表数组，每个链表都已经按升序排列。请你将所有链表合并到一个升序链表中，返回合并后的链表。示例 1： 输入&#xff…...

编程日记 2025/5/2 5:32:36

Java 泛型参数问题：‘ResponseData.this‘ cannot be referenced from a static contex

问题与处理策略问题描述 Data AllArgsConstructor NoArgsConstructor public class ResponseData<T> {private Integer code;private String msg;private T data;public static final int CODE_SUCCESS 2001;public static final int CODE_FAIL 3001;public static …...

编程日记 2025/5/10 21:05:24

21 课时精通生成式 AI：微软官方入门指南详解

21课时精通生成式AI：微软官方入门指南详解引言项目概述分析基本信息项目定位与目标核心功能详解1. 全面的课程结构2. 多样化的学习内容3. 技术亮点与创新点安装和使用教程环境要求安装步骤基本使用方法示例代码应用场景和实际价值适用业务场景实际应用价值效益可…...

编程日记 2025/5/2 5:31:34

WPF嵌入webapi服务器，充当微服务角色

WPF嵌入WebAPI服务器实现微服务角色一、方案概述在WPF应用程序中嵌入WebAPI服务器，使其能够同时作为桌面客户端和微服务提供者。这种架构允许WPF应用既作为用户界面，又作为后端服务，适合需要本地处理能力同时又能提供API接口的场景。二、技术选型 WebAPI框架：…...

编程日记 2025/5/2 5:31:34

构建现代分布式云架构的三大支柱：服务化、Service Mesh 与 Serverless

目录前言1. 服务化架构模式：构建可扩展的基础单元1.1 服务化的定义与演进1.2 在分布式云中的价值1.3 面临的挑战 2. Service Mesh 架构：服务通信的治理中枢2.1 什么是 Service Mesh？2.2 功能与优势2.3 在分布式云中的角色2.4 落地难点 3. Se…...

编程日记 2025/5/2 5:30:33

2025华东杯数学建模B题完整分析论文（共36页）（含模型、代码、数据）

2025华东杯数学建模B题完整分析论文摘要一、问题重述二、问题分析三、模型假设四、模型建立与求解 4.1问题1 4.1.1问题1思路分析 4.1.2问题1模型建立 4.1.3问题1代码 4.1.4问题1求解结果 4.2问题2 4.2.1问题2思路分析 4.2.2问题2模型建立 4.2…...

编程日记 2025/5/2 5:30:32

K8S - 零基础掌握 RBAC - 命名空间安全实战

一、为什么需要 RBAC 权限管理？ 真实场景在企业级 K8S 集群中，不同团队共享同一集群，容易发生权限管理问题，例如： 测试人员误删了生产数据库。实习生看到了财务系统的敏感配置。核心需求确保不同用户只能在自…...

编程日记 2025/5/2 5:29:31

OpenGL-ES 学习(13) ---- Shader 编译和程序对象

目录概述创建和编译Shader链接程序对象绘制一个最简单的三角形示例代码概述在本节中，我们提供创建 Shader对象，并且编译链接到一个程序对象的完整流程，主要内容如下： Shader 和程序对象概述创建和编译Shader创建和链接程序对…...

编程日记 2025/5/2 5:29:31

今天的python练习题

目录一、每日一言二、练习题三、效果展示四、下次题目五、总结一、每日一言晚上8点到的，还是会被感动到，有一位列车员同志在检票期间，叫我到列车员专座位上去坐，我很感激他，温暖人心，所以人间填我…...

编程日记 2025/5/2 5:29:30

HarmonyOS应用开发中实现本地化存储的几种方式

Preferences 存储适用于存储简单的键值对数据，如用户设置、配置信息等。其特点是轻量级、使用简单，适合频繁读取和少量更新的场景，数据存储在本地沙盒中，应用重启后数据保持不变。获取 Preferences 实例 ：使用 data…...

编程日记 2025/5/2 5:29:29

【C++指南】vector（三）：迭代器失效问题详解

. 💓 博客主页：倔强的石头的CSDN主页 📝Gitee主页：倔强的石头的gitee主页 ⏩ 文章专栏：《C指南》期待您的关注文章目录一、引言二、reserve 扩容引发的迭代器失效2.1 问题现象2.2 正确实现三、insert 插入引发的…...

编程日记 2025/5/2 5:28:28

Android面试总结之GC算法篇

一、GC 机制核心原理与算法面试题 1：Android 中为什么采用分代回收？分代策略如何优化 GC 效率？ 标准答案： 分代回收基于对象生命周期的差异，将堆分为年轻代（Young Gen）和老年代（Ol…...

编程日记 2025/5/2 5:28:28

驱动开发系列55 - Linux Graphics QXL显卡驱动代码分析（二）显存管理

一：概述前面介绍了当内核检测到匹配的PCI设备后，会调用 qxl_pci_probe 初始化设备，其中会调用qxl_device_init 来初始化设备，为QXL设备进行内存映射，资源分配，环形缓冲区初始化，IRQ注册等操作，本文展开说说这些细节，以及介绍下QXL的显存管理。二：QXL设备初始化细节…...

编程日记 2025/5/2 5:28:27

javaScript——DOM续（六）

滚轮事件在 Web 开发中监听鼠标滚轮事件时，不同浏览器存在差异。下面是对 onmousewheel、DOMMouseScroll 和标准 wheel 事件的完整说明和兼容写法。 🌀 onmousewheel 事件概览 onmousewheel 是早期浏览器（如 IE 和 Chrome）支持…...

编程日记 2025/5/2 5:27:25

MySQL 服务搭建

💢欢迎来到张翊尘的开源技术站 💥开源如江河，汇聚众志成。代码似星辰，照亮行征程。开源精神长，传承永不忘。携手共前行，未来更辉煌💥 文章目录在线安装Ubuntu/Debian更新系统包索引安装 MySQL …...

编程日记 2025/5/2 5:26:23

Eigen的使用

https://github.com/PX4/eigen Eigen在Qt中的配置（博主亲测） 1、Qt中调用 //.pro中-------- INCLUDEPATH \$$PWD/eigen-master//.cpp中------- #include <Eigen/Dense> using namespace Eigen;Matrix2d a; MatrixXd b(2,2); Vector3d v(1,2,3);…...

编程日记 2025/5/2 5:26:23

【云原生】基于Centos7 搭建Redis 6.2 操作实战详解

目录一、前言二、Redis 6.2 安装过程 2.1 下载安装包 2.2 安装包解压 2.3 安装包编译 2.3 安装 2.4 启动redis 2.4.1 前台启动（不推荐） 2.4.2 后启动（推荐） 2.4.3 关闭redis服务 2.4.4 设置客户端连接三、写在最后 …...

编程日记 2025/5/2 5:26:22

《TCP/IP详解卷1：协议》之第九章：IP选路

目录一、IP选路之IP层工作流程二、选路原理三、路由表中的五种不同的标志（flag） 四、路由表的初始化 1、静态路由表初始化 ①、手动配置 ②、默认网关配置 2、动态路由表初始化 ①、路由协议的作用 ②、直接连接网络的自动发现五、没有到达…...

编程日记 2025/5/2 5:26:21

HTTP知识速通

一.HTTP的基础概念首先了解HTTP协议，他是目前主要使用在应用层的一种协议 http被称为超文本传输协议而https则是安全的超文本传输协议本章节的内容首先就是对http做一个简单的了解。 HTTP是一种应用层协议，是基于TCP/IP协议来传递信息的。其中…...

编程日记 2025/5/2 5:25:20

npm命令介绍（Node Package Manager）

文章目录 npm命令全解析简介基础命令安装npm（npm -v检插版本）初始化项目（npm init）安装依赖包（npm install xxx、npm i xxx） 依赖管理精解依赖类型区分（生产环境依赖dependencies、开发环境依赖…...

编程日记 2025/5/2 5:25:20

在 Windows 上启用 Telnet 命令

在 Windows 上启用打开 Telnet 命令 Telnet 是一种用于远程访问和管理计算机的协议。尽管存在安全漏洞，Telnet 仍然被广泛用于初始网络硬件配置、远程访问、端口测试等任务。在 Windows 10 和 11 上，可以通过多种方法启用 Telnet 客户端。使用控制面板…...

编程日记 2025/5/2 5:25:19

网络安全零基础培训 L1-9 PHP连接MySQL数据库

使用MySQLi扩展 MySQLi 是 “MySQL Improved Extension” 的缩写，它是 PHP 用于与 MySQL 数据库进行交互的扩展。 step1：连接数据库 <?php// 定义数据库服务器的地址，通常 localhost 表示本地服务器$servername "服务器地址&quo…...

编程日记 2025/5/2 5:25:18

Python生活手册-文件二进制：从快递柜到生鲜冷链的数据保鲜术

一、快递柜与冷链运输：两种存取哲学 1. 普通快递柜（文本模式） 日常存取包裹的智能快递柜就像文本模式，系统会自动处理包裹的包装： with open(快递单.txt, r, encodingutf-8) as 快递柜:包裹内容快递柜.read() # …...

编程日记 2025/5/2 5:25:17

CUDA从入门到放弃

1 CUDA简介 GPU为图形处理器, 也是显卡的“大脑”显卡集成了GPU, 显存和其他电路的硬件GPU: 计算密集型CPU: 逻辑流控制GPU性能指标: 核心数GPU显存容量GPU计算峰值显存带宽 GPU不能单独计算, CPUGPU组成异构计算架构CPU起到控制作用, 一般成为主机(Host), GPU可以看作CPU的协…...

编程日记 2025/5/2 5:24:16

Golang多人在线坦克对战游戏(帧同步)

以下是一个简化但完整的同步帧游戏示例——实现一个多人在线坦克对战游戏。代码分为服务器和客户端两部分，使用UDP协议通信。我们将重点讲解核心同步机制。项目结构 sync-frame-game/ ├── server/ │ ├── main.go # 游戏服务器主逻辑 │ └── game_stat…...

编程日记 2025/5/2 5:24:15

MySQL | DQL语句-连接查询

MySQL | DQL语句-连接查询 🪄个人博客：https://vite.xingji.fun 什么是连接查询从一张表中查询数据称为单表查询。从两张或更多张表中联合查询数据称为多表查询，又叫做连接查询。什么时候需要使用连接查询？ 比如这样的需求&…...

编程日记 2025/5/2 5:24:14

JVM——Java 虚拟机是如何加载 Java 类的？

引入在 Java 世界的底层运作中，类加载机制扮演着一个既神秘又关键的角色。它就像是一个精心设计的舞台幕后 machinery，确保了 Java 程序能够顺利运行。今天，我们就深入探索 Java 虚拟机（JVM）是如何加载 Java 类的。 …...

编程日记 2025/5/10 4:00:45

Sigmoid函数导数推导详解

Sigmoid函数导数推导详解在逻辑回归中，Sigmoid函数的导数推导是一个关键步骤，它使得梯度下降算法能够高效地计算。 1. Sigmoid函数定义首先回顾Sigmoid函数的定义： g ( z ) 1 1 e − z g(z) \frac{1}{1 e^{-z}} g(z)1e−z1 2. 导…...

编程日记 2025/5/2 5:23:11

一、Webpack 的作用

1、基本配置结构

2、配置项详解

1. entry —— 构建入口

2. output —— 输出配置

3. mode：模式设置

4. module：模块规则

5. plugins：插件机制

6. resolve：模块解析配置（可选）

7. devServer：开发服务器（可选）

8. devtool：调试工具（可选）

9. target：目标平台（可选）

二、构建流程

1. 初始化（Initialization）

1. 读取配置文件

2. 初始化 Compiler 对象

3. 注册所有插件（Plugin 注册阶段）

相关文章：

1. `entry` —— 构建入口

2. `output` —— 输出配置

3. `mode`：模式设置

4. `module`：模块规则

5. `plugins`：插件机制

6. `resolve`：模块解析配置（可选）

7. `devServer`：开发服务器（可选）

8. `devtool`：调试工具（可选）

9. `target`：目标平台（可选）