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

解锁webpack：对html、css、js及图片资源的抽离打包处理

news 来源：原创 2025/7/15 9:12:54

面试被问到webpack，可别只知道说 HtmlWebpackPlugin 了哇。

前期准备

安装依赖

npm init -y
npm install webpack webpack-cli --save-dev

配置打包命令

// package.json
{"scripts": {// ... 其他配置信息"build": "webpack --mode production"}
}

基本配置

entry

通过entry指定项目打包时的入口文件，可以配置单入口或者多入口

单入口文件

module.exports = {entry: './path/to/my/entry/file.js',
};

多入口文件

module.exports = {entry: {index: './src/index.js',info: './src/information.js',},
};

output

通过output配置项目打包后的文件名以及文件的输出路径（位置）

filename：此选项决定了每个输出 bundle 的名称
- 什么是bundle?
  
  根据入口文件，最后打包生成的、可以直接让浏览器解析的JS、CSS文件。
- JS属于入口文件，那CSS为什么也可看作bundle？
  - 不对CSS做抽离，那CSS会被内联在JS中（必然算）；
  - 对CSS做抽离，但CSS也是通过JS去做处理的（算做样式bundle）；
- html算不算？
  
  HTML文件从严格意义上讲不算做bundle，因为不包含直接打包的代码或资源；
  
  只是对打包好的资源做加载或展示；
- CODE
```
module.exports = {output: {// 为什么这样命名？方便应用浏览器的缓存机制filename: 'js/[name].[hash:8].js',}
}
```

webpack官方：output->filename

webpack官方：缓存（输出哈希文件名）

path：打包时会将 bundle 写入到output.path选项指定的目录下
- 官方给出：对应一个绝对路径，如何配置它的值？
  
  绝对路径不做解释，懂得都懂，不懂得自查；
  
  在node下提供了一个全局变量__dirname，表示的就是当前执行的脚本文件所在的绝对路径；
- CODE
```
module.exports = {output: {filename: 'js/[name].[hash:8].js',// 将打包后的资源输出到当前目录下的 dist 目录中path: path.resolve(__dirname, 'dist')}
}
```

assetModuleFilename：与output.filename相同，不过应用于Asset Modules（字体or图标）
- 支持的占位符：[name],[file],[query],[ext],[hash]与[path]
  - name：原始文件名
  - file：完整文件名（带拓展名）
  - query：URL查询参数部分——图的大中小到底请求哪个？（x.png?size=large），得到的是问号及后面的部分；
  - ext：文件拓展名
  - hash：根据文件内容生成的哈希值｜区别与chunkhash和contenthash，是整个项目构建过程的哈希值，现在V5中叫fullhash。
  - path：文件的相对路径。
- 同内容但更新了文件名？涉及到文件名及内容，避免延迟更新。
- 注意：
  - 该配置项是全局的，全局优先级低于局部的；
  - 局部指的是后面通过asset系列方式对资源文件做解析时配置的generato.filename。
- CODE
```
module.exports = {output: {filename: 'js/[name].[hash:8].js',path: path.resolve(__dirname, 'dist'),// 将资源文件输出到 assets 目录下以hash码来命名assetModuleFilename: 'assets/[hash][ext]',}
}
```

clean：控制是否在生成文件之前清空打包输出目录
- 布尔值true（清空）、false（不清空）
- 或以对象形式配置，使用keep来设置保留某个目录下的文件
- CODE
```
module.exports = {output: {filename: 'js/[name].[hash:8].js',path: path.resolve(__dirname, 'dist'),assetModuleFilename: 'assets/[hash][ext]',clean:true}
}
```

optimization

优化：比如对代码进行压缩、分割代码、去除未使用的导出模块、去除空chunk等

minimize：告知 webpack 使用TerserPlugin或其它在optimization.minimizer定义的插件压缩 bundle；值为布尔类型。
- CODE
```
module.exports = {//...optimization: {minimize: true,},
};
```

minimizer：允许开发者通过提供一个或多个定制过的TerserPlugin实例，覆盖默认的代码压缩工具，通过去除文件的换行、空格、注释等字符来缩小文件体积。

teser-webpack-plugin

该插件使用terser来压缩Javascript（terser也是一个第三方依赖）
非内置，非webpack官方插件，需要安装使用
webpack官方：terser-webpack-plugin
CODE

npm install terser-webpack-plugin --save-dev

const TerserPlugin = require('terser-webpack-plugin');module.exports = {optimization: {minimize: true,// 为啥是数组？你就用一个吗？接受的类型就是数组类型minimizer: [new TerserPlugin()],},
};

css-minimizer-webpack-plugin

该插件使用cssnano来压缩CSS（cssnano是一个第三方库）
webpack贡献，不过也需要安装使用
注意：webpack只能识别处理Js文件，对CSS的压缩处理记得配置好它的加载器（下面说这个东西）。
webpack官方：css-minimizer-webpack-plugin
CODE

npm install css-minimizer-webpack-plugin --save-dev
## 安装加载器
npm install mini-css-extract-plugin --save-dev

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {// 当前的主角配置optimization: {minimize: true,minimizer: [new CssMinimizerPlugin(),],},module: {rules: [{test: /.s?css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},plugins: [new MiniCssExtractPlugin()],
};

加载器Loader

加载器在webpack这里有一个统称，叫loader，用于辅助webpack来加载非JS类型的文件，需要注意使用顺序。

webpack默认情况下只能处理Js文件，如果要处理其他文件，前提得让webpack能够加载其他文件，比如图片、CSS文件等。

配置在module>rules中，rules是一个对象数组，对于某类文件的解析及配置写在对象中，其中test指定某类文件，use指定所需的加载器们。

style-loader

style-loader：将 CSS 代码以<style>标签的形式插入到 HTML 文档的<head>部分。
- 当 Webpack 处理 CSS 文件时，通常和css-loader一起使用，css-loader会把 CSS 文件转换为 JavaScript 模块，style-loader则会提取这个模块中的 CSS 代码，并动态地创建<style>标签将其插入到 HTML 页面中。
- CODE
```
module.exports = {module: {rules: [{test: /\.css$/i,use: ['style-loader'],},],},
};
```

css-loader

css-loader：解析CSS文件，css-loader会对@import和url()进行处理，就像 js 解析import/require()一样
- 启用/禁用url/image-set函数进行处理。如果设置为false，css-loader将不会解析url或者image-set中的任何路径。
- webpack官方：css-loader
- CODE
```
module.exports = {module: {rules: [{test: /\.css$/i,use: ['style-loader',{loader:"css-loader",options:{url: true // 解析 CSS 中的 url()——处理背景图时需要}}],},],},
};
```

MiniCssExtractPlugin.loader

MiniCssExtractPlugin.loader：会将 CSS 代码提取出来，然后由MiniCssExtractPlugin插件将这些 CSS 代码合并到一个或多个独立的 CSS 文件中，最后在 HTML 文件中通过<link>标签引入这些独立的 CSS 文件。
- 区别于style-loader：
  - 将CSS抽离成单独的文件，而不是以style形式插入html；
  - 将抽离出来的css文件以link方式引入到html中。
- CODE
```
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {optimization: {minimize: true,minimizer: [new CssMinimizerPlugin(),],},module: {rules: [// 当前的主角配置{test: /.s?css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},// 对应插件plugins: [new MiniCssExtractPlugin()],
};
```

postcss-loader

postcss-loader：让 Webpack 能够使用 PostCSS 对 CSS 文件进行处理。
- 注意：
  - postcss-loader和postcss不一样，一个是loader一个是插件工具（下面讲）。
  - 使用postcss-loader还要下载postcss，要么铺的路没人走。
  - webpack官方：postcss-loader
```
npm install --save-dev postcss-loader postcss
```

html-loader

html-loader：解析HTML文件

将HTML导出为字符串，还可以对html字符串进行压缩处理
CODE

module.exports = {module: {rules: [{test: /\.html$/i,loader: 'html-loader',options: {// 开启压缩minimize: true,// 处理 HTML 中的资源引用sources: true, },},],},
};

html-withimg-loader

html-withimg-loader：基于html-loader进行拓展，解决一些问题。
- 可以对图片资源的输出进行配置，base64或是图片文件；
- 可处理通过include引入的子页面，子页面中的图片资源也会处理。

asset module

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

在 webpack 5 之前，通常使用：

file-loader将文件发送到输出目录
url-loader将文件作为 data URI 内联到 bundle 中
raw-loader将文件导入为字符串

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset/resource

将资源文件发送到输出目录，并导出 URL（在代码中使用该资源时就会使用这个URL路径）。
之前通过使用file-loader实现。
对于较大的文件：图片或字体文件等，需要单独打包到输出目录，方便浏览器缓存管理。
CODE

module.exports = {// ...其他配置~module: {rules: [{test: /\.(png|jpeg|jpg|gif)$/i,// 关键配置：仅匹配背景图路径（示例：src/css/imgs/ 目录）include: path.resolve(__dirname, 'src/css/imgs'),type: 'asset/resource',generator: {filename: 'bg-images/[name].[contenthash][ext]'}},{test: /\.(png|jpeg|jpg|gif)$/i,// 关键配置：排除背景图路径，匹配其他图片（示例：src/assets/images/ 目录）exclude: path.resolve(__dirname, 'src/css/imgs'),type: 'asset/resource',generator: {// 为什么这里没有用哈希编码命名？因为资源名称涉及网络动态设定。filename: 'images/[name][ext]'}}]}
};

asset/inline
- 导出一个资源的 data URI，也就是会将资源转换为Base64编码的数据。
- 之前通过使用url-loader实现。
- 将文件内容直接做编码化处理，避免额外的http请求。
asset/source
- 导出资源的源代码，也就是会将资源的内容以字符串的形式引入到JS模块中。
- 之前通过使用raw-loader实现。
- 譬如针对txt、md等文件。
asset
- 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现。
- 默认情况下：小于8KB会使用asset/inline，否则使用asset/resource；可以使用parser.dataUrlCondition来更改临界值。
- 资源模块 | webpack 中文文档
- CODE
```
module.exports = {// ...其他配置module: {rules: [{test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 4 * 1024 // 调整阈值为 4KB}},generator: {filename: 'images/[name].[contenthash][ext]'}}]}
};
```

其他

sass-loader：辅助webpack来加载sass文件。

sass-loader | webpack 中文文档
less-loader：辅助webpack来加载less文件。

less-loader | webpack 中文文档

插件

html-webpack-plugin

html-webpack-plugin：根据html模板文件来将打包后的资源自动注入进该模版文件中，最后生成HTML文件。

自动化注入资源：在 Webpack 打包过程中，生成的 JavaScript 和 CSS 文件的文件名可能会包含哈希值，手动在 HTML 文件中更新这些引用会很繁琐。html-webpack-plugin可以自动完成这个任务，确保 HTML 文件引用的是最新的打包资源，以script或link引入相关资源。
支持多页面应用：可以通过多次实例化该插件，为多页面应用的每个页面生成对应的 HTML 文件，并且为每个页面注入相应的资源。
自定义模板：允许使用自定义的 HTML 模板，开发者可以在模板中使用 EJS 语法嵌入变量和逻辑，灵活控制生成的 HTML 内容。
chunks指定：多页面应用会有多个入口文件，每个页面可能需要不同的代码块，chunks可以为每个页面精确指定要引入哪些代码块。为什么一个html有引入多个css，但最后webpack知道在哪个html中关联哪几个css资源，哪些css属于html指定的chunks，那这些css最后就会link进html。
HtmlWebpackPlugin | webpack 中文文档
CODE

npm i html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {index: './src/js/index.js',detail: './src/js/info.js',},// ...其他配置plugins: [new HtmlWebpackPlugin({template: './public/index.html',filename: 'index.html',chunks: ['index'] // 只注入 index 代码块，也是因为这里的设置才让对应的css能够引入到html中，因为css属于chunk，chunk关联html}),new HtmlWebpackPlugin({template: './public/detail.html',filename: 'detail.html',chunks: ['detail'] // 只注入 detail 代码块})]
};

mini-css-extract-plugin

MiniCssExtractPlugin：为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并将CSS代码抽离到单独的文件中，而不会让CSS嵌入在Js中。

官方建议同css-loader一起使用，哈哈要不然怎么处理css呢，净是没用的大实话
CODE

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {plugins: [new MiniCssExtractPlugin({filename: 'css/[name].[hash:8].css'})],module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, "css-loader"],},],},
};

css-minimizer-webpack-plugin

CssMinimizerPlugin：对每个CSS文件进行压缩处理。

默认情况下只在生产环境下开启CSS压缩优化，如果想要在开发环境下也启用CSS优化，需要将optimization.minimize设置为true。
CODE

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');module.exports = {module: {rules: [{test: /.s?css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'],},],},optimization: {minimizer: [new CssMinimizerPlugin(),],},plugins: [new MiniCssExtractPlugin()],
};

postcss

postcss ：一个CSS处理引擎，需要结合postcss-loader来使用在webpack中，有autoprefixer、cssnano、postcss-preset-env等常用插件。

autoprefixer

为解决浏览器兼容问题，为css相关样式添加前缀。
需要安装postcss-loader、postcss、autoprefixer

Autoprefixer CSS online

CODE

npm i postcss-loader postcss autoprefixer -D

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader'],},],},
};

注意：
- 添加前缀也是根据指定的浏览器列表来添加的，而浏览器列表正是package.json中的browserslist；
- 创建`postcss.config.js`文件，内部引入autoprefixer，或在webpack中直接设置对应的配置项；
```
// package.json
{// 其他配置"browserslist": ["last 2 versions", "ie >= 8", "Chrome > 31", "> 1%"]
}
```
```
// postcss.config.js
module.exports = {plugins: [require('autoprefixer')]
}
```

terser-webpack-plugin

TerserWebpackPlugin：虽然由社区成员维护的第三方包，基于terser来对Javascript进行压缩处理，在webpack中开箱即用，安装配置即可。

CODE

const TerserPlugin = require('terser-webpack-plugin')
module.exports = {optimization: {minimize: true,minimizer: [new TerserPlugin()]}
}

补充问题

批量导入图片

// 自动导入 ../images 目录下所有扩展名为 .png、.jpg、.jpeg 或 .gif 的图片文件
require.context('../images', false, /\.(png|jpe?g|gif)$/)
// 由于这些图片可能在多个html中都会用到，所以可以创建一个入口文件写入该代码，配置在entry中，这样webpack就可以知道对这些图片做模块打包了。

'../images'：这是第一个参数，表示要搜索的目录路径。在这个例子中，Webpack 会从当前文件所在目录的上一级的images目录开始搜索符合条件的文件。
false：第二个参数是一个布尔值，用于指定是否要递归搜索子目录。false表示不进行递归搜索，即只在../images目录下查找文件，而不会深入到其子目录中。如果设置为true，则会递归搜索该目录下的所有子目录。
/.(png|jpe?g|gif)$/：第三个参数是一个正则表达式，用于筛选符合条件的文件。这个正则表达式表示只匹配扩展名为.png、.jpg、.jpeg或.gif的文件。

样式正常，报错找不到CSS

由于使用了html-webpack-plugin，可以自动对css和js文件通过link或script插入到html模板中，所以检查是否模板并非模版而是原始的html文件；或者html模板中有引入相对路径下的源码文件。

<!-- 删除以下行（插件会自动注入） -->
<!-- <link rel="stylesheet" href="./css/index.css"> -->
<!--  删除手动引入的 CSS 链接，HtmlWebpackPlugin 会自动注入正确的路径 -->

哈希缓存

文件哈希+浏览器缓存

譬如资源的304状态码，其实是由于浏览器中缓存了该资源，且本次请求的该资源同缓存的资源一致，没有变化，直接使用缓存的资源。

响应头中的ETag

就是处理文件读取的关键点，是服务器响应资源时返回的一个唯一标识符，用于标识资源的具体版本。它通常基于资源内容生成（如哈希值、文件大小、修改时间等），类似于文件的 “指纹”。

浏览器再次请求同一资源时，会先检查本地缓存是否存在。若存在，会向服务器发送条件请求，通过If-None-Match头携带缓存中的Etag，询问服务器资源是否更新：
- 若资源未更新：
  
  服务器返回304 Not Modified，告知浏览器可直接使用本地缓存，不返回资源内容，减少带宽消耗。
- 若资源已更新：
  
  服务器返回新资源内容和新的Etag，浏览器更新缓存。

与 Cache-Control/Expires 的配合

Cache-Control：控制缓存的 “有效期”（如max-age=31536000表示缓存 1 年）。
Etag：在缓存过期后，作为精确验证手段，确保浏览器获取到最新资源。
- 若Cache-Control未过期，浏览器直接使用缓存，不触发 Etag 验证；
- 若Cache-Control过期，浏览器发送带If-None-Match的请求，通过 Etag 验证资源是否真的需要更新。
若同时使用Last-Modified和Etag，服务器会优先验证Etag（If-None-Match优先级高于If-Modified-Since）。

解锁webpack：对html、css、js及图片资源的抽离打包处理

面试被问到webpack，可别只知道说 HtmlWebpackPlugin 了哇。前期准备安装依赖 npm init -y npm install webpack webpack-cli --save-dev配置打包命令 // package.json {"scripts": {// ... 其他配置信息"build": "webpack --mode pr…...

编程日记 2025/7/15 9:12:54

[特殊字符] 大模型对话风格微调项目实战——模型篇 [特殊字符]✨

📜 目录 🎯 背景介绍 🔍 这篇文章的任务 🤖 模型选型 📊 模型评测 ⚙️ 模型训练 🔄 模型转换 🧪 模型训练效果评估 🎉 总结 🎯 背景介绍本文是《大模型对话风…...

编程日记 2025/7/14 13:29:30

lerobot[act解析]

ACT是具身智能模仿学习中重要的一个算法，本文会先从这个算法是是什么，这个算法如何工作的，到这个算法为什么有效，也就是what->how->why的这么一个顺序来进行解析 ACT 是什么？（What） 核心…...

编程日记 2025/7/15 5:55:47

使用Python创建带边框样式的Word表格

引言在生成Word文档时，表格的边框样式是提升专业度的重要细节。本文将通过一个实例，展示如何使用python-docx库为表格添加上下边框加粗和内部边框隐藏的复杂样式。代码将实现以下效果： 表格位于页面底部表格首行和末行的上下边框加粗隐藏内…...

编程日记 2025/7/15 8:39:45

GPLT-2025年第十届团体程序设计天梯赛总决赛题解(共计266分)

今天偶然发现天梯赛的代码还保存着，于是决定写下这篇题解，也算是复盘一下了 L1本来是打算写的稳妥点，最后在L1-6又想省时间，又忘记了insert，replace这些方法怎么用，也不想花时间写一个文件测试&#xff0c…...

编程日记 2025/7/15 9:08:28

基于SpringBoot的课程管理系统

前言今天给大家分享一个基于SpringBoot的课程管理系统。 1 系统介绍课程管理系统是一种专门为学校设计的软件系统，旨在帮助学校高效地管理和组织各类课程信息。该系统通常包括学生、教师和管理员三大角色。他们可以通过系统进行选课、查看课程表、考试、进…...

编程日记 2025/6/29 11:32:33

新品发布 | 6 秒全谱成像，VIX-N320 内置推扫式高光谱相机重磅发布

深圳市中达瑞和科技有限公司正式发布全新一代VIX-N320内置推扫式可见光近红外高光谱相机，一款集高速成像、高精度光谱分析与便携性于一体的革命性产品。以突破性技术重新定义光谱成像效率与精度，开启智能感知新纪元。作为国内唯一同时掌握凝采式、推扫式…...

编程日记 2025/7/15 8:41:15

手写深拷贝函数

在 JavaScript 中，深拷贝是指创建一个对象或数组的完全独立副本，包括其嵌套的对象或数组。这意味着修改副本不会影响原始对象。以下是手写一个通用的深拷贝函数的实现： 深拷贝函数实现 function deepClone(target, map new WeakMap()) {//…...

编程日记 2025/7/15 8:40:27

智能电网第3期 | 配电房巡检机器人通信升级方案

随着电力系统智能化发展，配电房巡检机器人是保障电力设备安全稳定运行的重要工具，其通信稳定性关乎巡检效率与质量。配电房巡检智能化升级面临着多项挑战： 电磁干扰大：配电房电气设备密集，电磁干扰强，易造成…...

编程日记 2025/7/15 9:01:41

阿里云 AI 搜索开放平台：RAG智能化工作流助力 AI 搜索

——已获知乎作者【小小将】授权转载最近AI圈的变化可谓是日新月异，随着大模型的技术突飞猛进，大模型的能力日益增强。这些都驱动着我们的搜索技术快速演进到了下一代，也就是 AI 搜索的技术。大模型的快速发展不仅重塑了搜索技术的基础&…...

编程日记 2025/7/15 8:39:05

同z科技面经

同z科技-2025-4-23 1.自我介绍个人信息校园经历实习经历项目经历个人技能掌握目前学习技术 2.封装缓存工具类怎么封装的先介绍使用缓存的问题解决的逻辑封装的逻辑应用缓存穿透： 缓存雪崩： 缓存击穿： https://www…...

编程日记 2025/7/15 1:37:24

制作一款打飞机游戏19：碰撞检测

在这一章中，我们致力于解决碰撞检测问题，但它并不如我们所愿工作。碰撞检测问题今天我想解决的是碰撞检测问题，这个令人畏惧的碰撞检测。我理解，这里有很多复杂的if语句，但我们可以做到。不过，在此之…...

编程日记 2025/7/15 8:42:45

python后端程序部署到服务器 Ubuntu并配合 Vue 前端页面运行

将 PyCharm 研发的 Web 后端系统程序部署到 Ubuntu 24.04 服务器并配合 Vue 前端页面运行，可按以下步骤操作： 1. 服务器环境准备在开始部署之前，需要在 Ubuntu 24.04 服务器上安装必要的软件。 # 更新系统软件包 sudo apt update sudo ap…...

编程日记 2025/7/15 8:36:31

9N60-ASEMI无人机专用功率器件9N60

编辑：LL 9N60-ASEMI无人机专用功率器件9N60 型号：9N60 品牌：ASEMI 封装：TO-220F 最大漏源电流：9A 漏源击穿电压：600V 批号：最新 RDS（ON）Max：1.00Ω …...

编程日记 2025/7/10 18:11:58

Java单例模式详解：实现线程安全的全局访问点

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取一、什么是单例模式？ 单例模式（Singleton Pattern）是一种创建型设计模式，它保证一个类仅有一个实例&#xff…...

编程日记 2025/7/15 8:42:01

【无人机】无人机光流模块Optical Flow设置（三），光流测距一体传感器的配置。凌启科技的光流测距一体模块的测试。

目录 1、光流测距一体模块的配置，详细步骤 1.1、连接 1.2、上位机使用 1.3、切换为PX4协议 2、适配PX4飞控，QGC上参数配置 2.0、安装连接 2.1、串口配置： 2.2、启用光流辅助功能 2.3、启用测距辅助功能 2.4、高度参考设置 2.5、重…...

编程日记 2025/7/15 9:12:04

电路中的DGND、GROUND、GROUND_REF的区别，VREF、VCC、VDD、VEE和VSS的区别？

目录 1 DGND、GROUND、GROUND_REF的区别 1.1 DGND（Digital Ground） 1.2 GROUND（Ground） 1.3 GROUND_REF（Ground Reference） 1.4 区别 2 VREF、VCC、VDD、VEE和VSS的区别 2.1 VREF（Refere…...

编程日记 2025/7/15 8:36:44

VSFTPD+虚拟用户+SSL/TLS部署安装全过程（踩坑全通）

Author : Spinach | GHB Link : http://blog.csdn.net/bocai8058文章目录前言准备配置虚拟用户1.创建虚拟用户列表文件2.生成数据库文件3.设置虚拟用户独立访问权限配置PAM认证1.创建PAM配置文件2.测试PAM认证创建虚拟用户映射的系统用户生成SSL/TLS证书配置VSFTPD服务1…...

编程日记 2025/7/15 8:33:04

Java-File类详解（一篇讲透）

一：File类的实例化及常用方法 1.1 定义 1.2 构造器 （1）File(String pathname) 文件的路径表示方式测试： （2）File(String parent,String child) 在父路径下创建子文件（没后缀是目录&#xff0c…...

编程日记 2025/7/15 8:51:49

Representation Flow for Action Recognition论文笔记

原文笔记： What： 在本文中，我们提出了一种受光流算法启发的CNN层，用于学习动作识别的运动表示，而无需计算光流。我们的表示流层是一个完全可微分的层，旨在捕获模型中任何表示通道的“流”。其迭代流量优化…...

编程日记 2025/7/14 12:50:56

云计算领域需掌握的核心技术

云计算作为现代信息技术的核心基础设施，涵盖从基础资源管理到上层应用开发的完整技术栈。它依靠强大的计算能力，使得成千上万的终端用户不担心所使用的计算技术和接入的方式等都能够进行有效的依靠网络连接起来的硬件平台的计算能力来实施多种应用。一、…...

编程日记 2025/6/29 9:30:23

Android仿今日头条Kotlin版本

软件信息 gradle-8.0Sdk信息 //编译版本 compileSdk33 //最小版本 minSdk24 //目标版本 targetSdk31Android Studio Giraffe | 2022.3.1 Patch 2（建议版本不要太低）MVVMAndroid Jetpack 项目注意没有服务器，用的是Apifox模拟服务器返回&a…...

编程日记 2025/6/29 12:19:57

Javashop新零售电商系统：构建智能零售生态的终极解决方案

JavaShop Javashop新零售电商系统：构建智能零售生态的终极解决方案引言：数字化转型浪潮中的零售业变革Javashop新零售系统核心优势1. 全渠道融合：打破线上线下壁垒2. 智能化门店管理：赋能传统零售3. 智慧营销与会员运营系统功能模…...

编程日记 2025/7/10 18:42:17

vscode如何多行同时编辑，vscode快速选中多行快捷键

目录 vscode如何多行同时编辑，vscode快速选中多行快捷键一、实践情景二、不同多选情景的操作方案 1、使用 Alt 鼠标点击选择任意行的任意位置 2、使用快捷键 Shift Alt 鼠标拖动 3、使用快捷键添加多行光标 4、结合正则表达式批量编辑 5、使用扩展插件&…...

编程日记 2025/7/12 13:21:00

珈和科技助力“农险提效200%”！“遥感+”技术创新融合省级示范项目荣登《湖北卫视》！

近日，湖北卫视《湖北十分》栏目报道了珈和科技遥感赋能农业保险创新，典型项目入选十大省级卫星应用示范标杆事迹，系统展示了珈和科技在卫星遥感与农业保险融合领域的创新成果。作为空天农业领域的领军企业，珈和科技依托创新构建…...

编程日记 2025/7/11 5:42:08

UIAutomator 与 Playwright 在 AI 自动化中的界面修改对比

UIAutomator 与 Playwright 在 AI 自动化中的界面修改对比在 AI 驱动的 UI 自动化中，Playwright（主要用于 Web）和 UIAutomator（用于 Android）的设计定位不同，对界面修改的支持也截然不同。下面从界面修改能力、API 设计、替代方案和实践建议等方面进行分析，对比两者在…...

编程日记 2025/6/29 9:54:36

Redisson Watchdog实现原理与源码解析：分布式锁的自动续期机制

引言在分布式系统中，Redis分布式锁是解决资源竞争问题的常用方案。然而，当持有锁的客户端因GC、网络延迟或处理时间过长导致锁过期时，可能引发数据一致性问题。Redisson的Watchdog（看门狗）机制通过自动续期解决了这一…...

编程日记 2025/7/11 9:12:57

在C#串口通信中，一发一收的场景，如何处理不同功能码的帧数据比较合理，代码结构好

在 C# 串口通信的一发一收场景里，处理不同功能码的帧数据可采用以下合理的代码结构，它能让代码更具可读性、可维护性和可扩展性。实现思路定义帧结构：创建一个类来表示通信帧，其中包含功能码、数据等信息。功能码处理逻辑&…...

编程日记 2025/7/12 6:48:19

easypoi 实现word模板导出

特此非常致谢：easypoi实现word模板基础的可以参考上文； 但是我的需求有一点点不一样。这是我的模板：就是我的t.imgs 是个list 但是很难过的是easy poi 我弄了一天，我都没有弄出来嵌套list循环怎么输出显示，更难过…...

编程日记 2025/7/13 20:00:34

集结号海螺捕鱼服务器调度与房间分配机制详解：六

本篇围绕服务器调度核心逻辑进行剖析，重点讲解用户连接过程、房间分配机制、服务端并发策略及常见性能瓶颈优化。适用于具备中高级 C 后端开发经验的读者，覆盖网络会话池、逻辑服调度器与房间生命周期管理等关键模块。一、服务器结构概览整体系统采用…...

编程日记 2025/6/29 9:30:22

opencv--图像滤波

图像滤波含义方法噪声是怎么产生的线性滤波概念利用窗口对图像中的像素进行加权求和的滤波方式。图像来源于小虎教程。图像的滤波是二维滤波的过程。滤波器窗口： 滤波器窗口（也称为卷积核或模板）是一个小的矩阵（通常为…...

编程日记 2025/6/29 9:31:11

uniapp返回上一页接口数据更新了，页面未更新

注意：不是组件套组件可以不使用setTimeout延时返回上一页一般会走onshow，但是接口更新了页面未更新 onShow(() > {// 切换城市后重新调用数据if (areaId.value) {const timer setTimeout(async () > {timer && clearTimeout(timer);…...

编程日记 2025/6/29 9:30:20

redis 使用 Docker 部署简单的Redis 集群（包括哨兵机制）

目录环境准备步骤 1：创建 Docker Compose 配置文件步骤 2：创建配置文件主节点配置文件 (redis.conf) 从节点配置文件 (slave.conf) 哨兵配置文件 (sentinel.conf) 步骤 3：启动 Redis 集群步骤 4：验证集群状态 1. 检…...

编程日记 2025/7/11 1:16:40

私有知识库 Coco AI 实战（三）：摄入 Elasticsearch 官方文档

相信经常使用 Elasticsearch 的小伙伴，难免要到 ES 官网查找资料，文档内容多难以查找不说，还有很多个版本，加上各种生态工具如 Filebeat、Logstash 头就更大了。今天我来介绍如何使用 Coco AI 快速搜索 Elasticsearch 官方文档。在…...

编程日记 2025/7/11 19:03:43

12-DevOps-Gitlab托管Jenkinsfile

前面通过执行脚本的方式，完成了pipline流水线的构建。脚本是保存在Jenkins中的，这种方式不利于迁移，也不利于查找脚本的历史变更信息。通过把脚本放到GitLab中，然后在Jenkins中引用的方式来解决上述的问题。创建Jenkinsfile文件…...

编程日记 2025/6/29 11:02:10

CSS3 基础（边框效果）

一、边框效果属性功能示例值说明border-radius创建圆角border-radius: 20px;设置元素的圆角半径，支持像素（px）或百分比（%）。值为 50% 时可变为圆形。box-shadow添加阴影box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5)…...

编程日记 2025/7/15 5:19:27

使用 VSCode 编写 Markdown 文件

目录一、安装 Markdown 插件二、新建 Markdown 文档三、Markdown 基本语法目录和标题文本样式列表图片链接代码表格注脚与注释符号表情四、将 Markdown 文档导出为 PDF 一、安装 Markdown 插件参考文章：【[Markdown] 使用vscode开始Markdown写作之旅】打开 VSco…...

编程日记 2025/7/10 19:28:57

搭建 Stable Diffusion 图像生成系统并通过 Ngrok 暴露到公网（实现本地系统网络访问）——项目记录

目录 📚 背景与需求 📝 需求明确 🔑 核心功能 🌍 网络优化 🛠️ 方案确认 ⚙️ 技术栈 📈 实现流程（Flask端口Ngrok注册authtoken） 🎯 优化目标 🔍 实…...

编程日记 2025/7/11 15:25:51

伺服器用什么语言开发呢？做什么用什么？

最近因为要评估帮合作对象做连接我们工具的语言翻译器，所以顺便做了一个小范围的调查，看看那些语言是应该在我们优先制作翻译器的部分，当然，各种语言在伺服器开发中其实各有拥护者，而选择也很常受到应用场景、产业特性…...

编程日记 2025/7/11 4:08:55

实现SpringBoot底层机制【Tomcat启动分析+Spring容器初始化+Tomcat 如何关联 Spring容器】

下载地址： https://download.csdn.net/download/2401_83418369/90675207 一、搭建环境创建新项目在pom.xml文件中导入依赖 （一定要刷新Maven）排除内嵌的Tomcat，引入自己指定的Tomcat <?xml version"1.0" enco…...

编程日记 2025/6/29 10:21:57

spark—kafka

消息队列与Kafka介绍消息队列模式： 点对点模式和发布订阅模式。Kafka主要使用发布订阅模式。 Kafka角色： 包括broker、topic、分区、生产者、消费者、消费者组、副本、leader和follower 术语解释 Broker 安装了kafka的节点 Topic 每条发…...

编程日记 2025/7/11 1:36:04

【AI 加持下的 Python 编程实战 2_09】DIY 拓展：从扫雷小游戏开发再探问题分解与 AI 代码调试能力（上）

DIY 拓展：从扫雷小游戏开发再探问题分解与 AI 代码调试能力（上） 1 起因最近在看去年刚出了第 2 版《Learn AI-assisted Python Programming》，梳理完第七章的知识点后，总感觉这一章的话题很好——问题分解能力的培…...

编程日记 2025/7/13 16:44:16

【JVS更新日志】物联网、智能BI、智能APS 4.23更新说明！

项目介绍 JVS是企业级数字化服务构建的基础脚手架，主要解决企业信息化项目交付难、实施效率低、开发成本高的问题，采用微服务配置化的方式，提供了低代码数据分析物联网的核心能力产品，并构建了协同办公、企业常用的管理工具等&…...

编程日记 2025/7/10 17:17:57

品融电商：领航食品类目全域代运营，打造品牌增长新引擎

品融电商：领航食品类目全域代运营，打造品牌增长新引擎在竞争激烈的电商市场中，食品类目因其高频消费与强复购属性，成为品牌必争之地。然而，行业同质化严重、用户心智难突破、流量成本攀升等痛点，让许多食…...

编程日记 2025/6/29 11:40:05

非关系型数据库八股文 Redis相关缓存雪崩击穿穿透

目录图缓存雪崩大量数据同时过期解决方案也有可能是 Redis 挂了故障缓存击穿用互斥锁解决热点数据永远不过期缓存穿透重点可能的原因限制请求的访问缓存空值或者默认值布隆过滤器(重要) 总结参考资料图缓存雪崩缓存雪崩是指大量缓存数据同时…...

编程日记 2025/6/29 11:06:22

uniapp自定义拖拽排列

uniapp自定义拖拽排列并改变下标  <template><view class"container"><view v-for"(item, index) in list" :key"item.id" class"drag-item" :style"{transform: translate(${activeInde…...

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

汽车免拆诊断案例 | 2013款大众辉腾车发动机抖动

故障现象　一辆2013款大众辉腾车，搭载CMV发动机（燃油喷射方式为缸内直喷），累计行驶里程约为21.8万km。该车发动机怠速、加速时均有抖动，且组合仪表上的发动机故障灯异常点亮。故障诊断用故障检测仪检测&#xff0…...

编程日记 2025/7/12 1:52:22

【氮化镓】同质结GaN PiN二极管的重离子单粒子烧毁SEB

2025 年，范德堡大学的 A. S. Senarath 等人通过实验研究的方法，深入探究了在同质结 GaN 垂直 PIN 二极管中，边缘终止设计对重离子诱发的单粒子漏电（SELC）和单粒子烧毁（SEB）的影响。该研究获得了多个美国军方机构的支持，包括空军卓越辐射效应中心、海军研究办公室、能源…...

编程日记 2025/7/10 17:39:38

Java基础 4.23

1.包的命名命名规则只能包含数字字母下划线小圆点但不能用数字开头不能是关键字或保留字命名规范一般是小写字母小圆点一般是 com.公司名.项目名.业务模块名比如 com.sina.crm.user 用户模块com.sina.crm.order 订单模块com.sina.crm.utils 工具类 2.常用的包…...

编程日记 2025/7/11 12:35:57

【学习准备】算法和开发知识大纲

1 缘起今年（2025年）的职业升级结果：不通过。没办法升职加薪了。需要开始完善学习，以应对不同的发展趋势，为了督促自己学习，梳理出相关学习大纲。分为算法和开发两部分。算法，包括基础算法和…...

编程日记 2025/7/12 17:57:58

前期准备

安装依赖

配置打包命令

基本配置

entry

output

optimization

加载器Loader

style-loader

css-loader

MiniCssExtractPlugin.loader

postcss-loader

html-loader

html-withimg-loader

asset module

其他

插件

html-webpack-plugin

mini-css-extract-plugin

css-minimizer-webpack-plugin

postcss

terser-webpack-plugin

补充问题

批量导入图片

样式正常，报错找不到CSS

哈希缓存

响应头中的ETag

与 Cache-Control/Expires 的配合

相关文章：