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

webpack基础配置

news 来源：原创 2025/7/27 22:08:17

文章目录

一、默认入口和默认出口
二、资源配置
三、输出文件
- 3.1 多文件入口
- 3.2 HtmlWebpackPlugin插件
四、环境
- 4.1 环境变量
- 4.2 热更新
五、代码分离
- 5.1 公共模块
- 5.2 懒加载
- 5.3 预获取/预加载模块
六、缓存
七、Tree Shaking
八、公共路径

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具，在许多项目中都有应用，但是往往平台搭建以后很少去修改配置，熟悉基础配置可以更快的修复配置问题。

一、默认入口和默认出口

默认目录结构


webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js // 可以先不配置，最后一步再加
|- /dist|- index.html
|- /src|- index.js

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>起步</title></head><body>// 默认出口就是dist/main.js// 这里是直接指定，包括使用插件默认也是引入dist/main.js<script src="main.js"></script></body>
</html>

index.js

// 引入的包可以被识别的打包
import _ from "lodash";function component() {const element = document.createElement("div");// lodash 现在使用 import 引入element.innerHTML = _.join(["Hello", "webpack"], " ");return element;
}document.body.appendChild(component());

检查npm

// 检查npm registry
npm config get registry
// 改成淘宝源的新地址，下载包更快，不容易出错
npm config set registry https://registry.npmmirror.com
// npm 开发依赖;只会在开发环境需要，不会打包到dist中
// 也就是package.json中的devDependencies
// --save-dev 简写 -D
npm i package --save-dev // 示意，不用安装
// npm 生产依赖;会打包到dist中，影响包的大小和打包速度
// 也就是package.json中的dependencies
// --save 简写 -S
npm i package --save // 示意，不用安装

安装包

 npm init -y // y表示yes，跳过一步npm i webpack webpack-cli -Dnpm i lodash -S

运行npx webpack 打包；
vscode安装插件Live Server，右键index.html启动Open with Live Server
可以看到已经启动了页面

增加webpack.config.js
path.resolve相关用法可以查看另一篇 path.resolve相关用法
在package.json中script对象中加入一行 “build”: “webpack”（注意最后一行没有,号）
npm run build进行打包；发现打包后正常访问；
之前没有webpack.config.js，也可以访问，也就是说这里的配置是webpack的默认打包配置

// webpack.config.js
const path = require("path");module.exports = {entry: "./src/index.js", // 入口output: { // 出口 // 输出文件filename: "main.js",// 注意这个dist是相对于文件夹根目录，也就是创建一个dist目录并且把输出文件放在里面path: path.resolve(__dirname, "dist"),},
};

二、资源配置

src下增加style.css, 引入index.js中，给dom添加上类名

// style.css
.red {color: red;font-size: 20px;
}// index.js
import _ from "lodash";
import "./style.css";function component() {const element = document.createElement("div");// lodash 现在使用 import 引入element.innerHTML = _.join(["Hello", "webpack"], " ");element.classList.add("red");return element;
}document.body.appendChild(component());

npm i style-loader css-loader -D 安装loader
webpack.config.js配置加上处理style的loader

const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "main.js",path: path.resolve(__dirname, "dist"),},module: {rules: [{// 正则，以.css文件结尾，$表示结尾，\表示转义test: /\.css$/,// 从右边的loader开始加载处理，返回结果给左边的继续处理use: ["style-loader", "css-loader"],},],},
};

图片资源

// .style.css
.red {color: red;font-size: 20px;height: 300px;background: url('./logo.png'); // 增加图片的使用
}
// webpack.config.js中module.rules添加一条
{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: 'asset/resource', // 这个type应该是webpack自带的插件进行处理
},

其他资源就不一一列举了，要么有默认处理插件，要么需要安装对应的插件再配置rules；比如csv表格、json文件、字体文件、ts文件

三、输出文件

3.1 多文件入口

增加/print.js，修改index.html、index.js、webpack.config.js

// src/print.js
export default function print(msg = "Hello World") {console.log(msg);
}
// index.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>起步</title>// index.html就在dist目录下，dist目录新增了两个出口文件print.js、index.js<script src="./print.js"></script></head><body><script src="./index.js"></script></body></html>
// index.js
import _ from "lodash";
import "./style.css";
import print from "./print";
function component() {const element = document.createElement("div");// lodash 现在使用 import 引入element.innerHTML = _.join(["Hello", "webpack"], " ");element.classList.add("red");const btn = document.createElement("button");btn.innerHTML = "click me";btn.onclick = print;element.appendChild(btn);return element;
}document.body.appendChild(component());
// webpack.config.js
const path = require("path");module.exports = {// 配置多个入口，那么就会产生多个出口文件; 多个入口文件都会在index.html中单独引入entry: {index: "./src/index.js",print: "./src/print.js",},output: {filename: "[name].js", // name表示动态文件名，entry中指定的keypath: path.resolve(__dirname, "dist"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},
};

重新打包，可以正常访问和点击按钮

3.2 HtmlWebpackPlugin插件

帮助自动生成index.html文件（前面是手动引入出口文件），安装HtmlWebpackPlugin插件
npm i html-webpack-plugin -D
修改webpack.config.js

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: { index: "./src/index.js",print: "./src/print.js", // 注意这个顺序，index.html中的引入顺序也是如此},output: {// 增加contenthash值，是一个随机字符串filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),// 可能改造过配置文件，导致dist目录有之前构建的很多不需要文件，构建前清理一下dist目录clean: true, },module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],
};

四、环境

4.1 环境变量

修改package.json；webpack.config.js；print.js
通过命令行传入参数；通过mode选择打包模式；通过process.env.NODE_ENV获取当前打包环境
webpack.config.js中module.exports改造成匿名函数，以便获取参数
增加source-map源代码映射

// package.json 
// 这一条改成这个 增加打包的参数；在env对象里增加goal: local, production: true
// --progress 是增加进步条；--color增加颜色；打包时间长的时候出现; 
"build": "webpack --env goal=local --env production --progress --color"// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");// 改造成匿名函数，这样可以获取参数
module.exports = (env, argv) => {// env中增加goal和production属性; env是argv中的一个属性console.log("env, argv", env, argv);return {// mode是指定模式，可以通过env参数来决定是什么模式mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {index: "./src/index.js",print: "./src/print.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],};
};
// print.js
export default function print(msg = "Hello World") {// 注意在一般文件中访问process或者process.env会报错，node只暴漏了process.env.NODE_ENV变量出来// process.env.NODE_ENV就是webpack.config.js中的mode属性console.log("process", process.env.NODE_ENV);
}

4.2 热更新

之前手动build打包，还要在页面上刷新一下才能看到最新内容
现在安装插件，npm i webpack-dev-server -D

// package.json scripts增加
// webpack-dev-server --open 和 webpack serve --open 都是可以的；出现错误可以都试一下；
"start-dev": "webpack-dev-server --open --env production=false",
"start": "webpack serve --open --env production=false",// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {print: "./src/print.js",index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {// runtimeChunk是模块关系文件，single表示这里打包成一个runtime名称的文件runtimeChunk: "single", },plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

五、代码分离

5.1 公共模块

index.js\print.js中都引入了lodash
添加splitChunks让lodash单独打包成一个文件

// print.js
import _ from "lodash";
export default function print(msg = "Hello World") {console.log("process", process.env.NODE_ENV, 1111);console.log(_.join([1, 2, 3]));
}// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {print: "./src/print.js",index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {runtimeChunk: "single",// all 表示公共的依赖模块提取到各自的chunk中；// 比如两个文件里引入了lodash，那么lodash会被打包lodash的chunk中splitChunks: {chunks: "all",},},plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

5.2 懒加载

index.js改成动态引入print.js
import导入时加上/* webpackChunkName: “print” /，可以让这个文件单独打包，不会加载，等需要加载的时候才会请求资源；注意/ 之间的空格

index.js
import _ from "lodash";
import "./style.css";
// import print from "./print"; // 注释掉，使用动态导入 否则也不会单独打包function component() {const element = document.createElement("div");// lodash 现在使用 import 引入element.innerHTML = _.join(["Hello", "webpack"], " ");element.classList.add("red");const btn = document.createElement("button");btn.innerHTML = "click me";btn.onclick = (e) =>// import(/* webpackChunkName: "print" */ "./print").then((module) =>module.default());element.appendChild(btn);return element;
}document.body.appendChild(component());// webpack.config.js
// 用5.1配置就可以了

5.3 预获取/预加载模块

预获取，空闲时进行；加载将来需要的资源
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');
预加载，父 chunk 加载时以并行方式开始加载；加载当前路由下可能需要的资源
import(/* webpackPreload: true */ './path/to/LoginModal.js');

六、缓存

contenthash是文件名唯一标识，这样文件更新了，客户端就能进行资源重新请求和更新
公共依赖包不会经常更新，所以对应的打包文件也不需要更新，把这些不需要经常更新的包进行缓存

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {// moduleIds 模块标识符，使模块更容易被缓存和重复使用；// 项目中新增和删除文件，导致解析顺序发生变化，会导致vendor包变化; 创建唯一模块标识符moduleIds: "deterministic",runtimeChunk: "single",// all 表示公共的依赖模块提取到各自的chunk中；// 比如两个文件里引入了lodash，那么lodash会被打包lodash的chunk中splitChunks: {chunks: "all",cacheGroups: {vendor: {// node_modules下的包都打包到vendors这个chunk中test: /[\\/]node_modules[\\/]/,name: "vendors",chunks: "all",},},},},plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

七、Tree Shaking

optimization.usedExports = true；移除未使用的代码
如果引入了资源(函数funTest)，但是觉得可以不用打包他，他不会对结果有影响，可以设置标识；/#PURE/ funTest();
sideEffects表示该文件引入，但是未使用，需要确定这个文件有没有必要引入；在package.json中增加 “sideEffects”: [“./index.js”]，表示如果你在index.js中引入了另外一个文件，但是该文件内容没有使用，可以放心移除这个文件不必打包进index.js，index.js被标记为无副作用

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {// moduleIds 模块标识符，使模块更容易被缓存和重复使用；// 项目中新增和删除文件，导致解析顺序发生变化，会导致vendor包变化; 创建唯一模块标识符moduleIds: "deterministic",runtimeChunk: "single",// all 表示公共的依赖模块提取到各自的chunk中；// 比如两个文件里引入了lodash，那么lodash会被打包lodash的chunk中splitChunks: {chunks: "all",cacheGroups: {vendor: {// node_modules下的包都打包到vendors这个chunk中test: /[\\/]node_modules[\\/]/,name: "vendors",chunks: "all",},},},// tree shaking// // 标记未使用的导出（代码级别），production模式下不会被打包进输出文件（代码体积会减少）usedExports: true, },plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

八、公共路径

默认公共路径是从output.publicPath去引用
可以通过webpack.DefinePlugin自己定义环境变量，在页面可以使用；没有定义就使用否则会报错（process not defined）
webpack_public_path = window.test_public_path，这一行单独放在一个文件里，在入口文件最上面引入，可以在运行时规定公共路径；注意在服务器上挂载环境变量配置，给变量赋值window.test_public_path

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");// 尝试使用环境变量，否则使用根路径; process.env.ASSET_PATH 默认值是undefined
const ASSET_PATH = process.env.ASSET_PATH || "/"; // 
console.log("ASSET_PATH", process.env.ASSET_PATH, ASSET_PATH);module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {// moduleIds 模块标识符，使模块更容易被缓存和重复使用；// 项目中新增和删除文件，导致解析顺序发生变化，会导致vendor包变化; 创建唯一模块标识符moduleIds: "deterministic",runtimeChunk: "single",// all 表示公共的依赖模块提取到各自的chunk中；// 比如两个文件里引入了lodash，那么lodash会被打包lodash的chunk中splitChunks: {chunks: "all",cacheGroups: {vendor: {// node_modules下的包都打包到vendors这个chunk中test: /[\\/]node_modules[\\/]/,name: "vendors",chunks: "all",},},},// tree shaking// 标记未使用的导出（代码级别），production模式下不会被打包进输出文件（代码体积会减少）usedExports: true, },plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),// 这可以帮助我们在代码中安全地使用环境变量// 让你可以自己定义一些变量，在代码中使用new webpack.DefinePlugin({"process.env.ASSET_PATH": JSON.stringify("ASSET_PATH"),}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

webpack基础配置

文章目录一、默认入口和默认出口二、资源配置三、输出文件3.1 多文件入口3.2 HtmlWebpackPlugin插件四、环境4.1 环境变量4.2 热更新五、代码分离5.1 公共模块5.2 懒加载5.3 预获取/预加载模块六、缓存七、Tree Shaking八、公共路径 webpack 是一个用于现代 JavaScript 应用…...

编程日记 2025/7/27 22:08:17

stm32利用LED配置基础寄存器+体验滴答定时器+hal库环境配置

P1 LED控制与流水灯效果实现概述大家好，今天我们来学习一下如何在STM32上控制LED灯，并且实现一个流水灯的效果。这不仅是一个基础的实践，也是嵌入式开发中非常常见的需求。 LED控制 1. LED初始化首先，我们需要对LED灯对应…...

编程日记 2025/7/25 8:42:17

Spark RDD sortBy算子执行时进行数据 “采样”是什么意思？

一、sortBy 和 RangePartitioner sortBy 在 Spark 中会在执行排序时采用 rangePartitioner 进行分区，这会影响数据的分区方式，并且这一步骤是通过对数据进行 “采样” 来计算分区的范围。不过，重要的是，sortBy 本身仍然是一个 tr…...

编程日记 2025/7/27 21:53:10

按官网提示是可以安装成功的，但是curl无法使用https下载，会造成下述语句执行失败 # Add Dockers official GPG key: sudo apt-get update sudo apt-get install ca-certificates curl sudo install -m 0755 -d /etc/apt/keyrings sudo curl -fsSL https…...

编程日记 2025/7/27 21:53:48

Tri Mode Ethernet MAC IP核详解

本文对 Vivado 的三速 MAC IP 核（Tri Mode Ethernet MAC，TEMAC）进行介绍。在自行实现三速以太网 MAC 控制器时，GMII/RGMII 接口可以通过 IDDR、ODDR 原语实现，然而实际使用中自己实现的模块性能不是很稳定&#xff08…...

编程日记 2025/7/25 10:32:32

【U盘车载音乐】某宝198的3068首车载专用音乐合集【高音质】24G

「【U盘车载音乐】某宝198的3068首车载专用音乐合集【高音质】24G」复制下方口令，打开最新版「夸克APP」即可获取保存（防止和谐！！！） 口令： 动作懿范鉴真渡多好备用口令： /~19dc35…...

编程日记 2025/7/27 21:52:36

android 实现答题功能

一、效果二、实现思路 1、界面实现实现起来其实不难，首先我们可以看到，界面是由答题进度、题目、选项ABCD组成，现在就是要考虑实现方式，答题进度可以使用Textviewprogressbar实现，题目直接使用Textview，…...

编程日记 2025/7/27 21:51:20

JSONP处理跨域请求

JSONP 背景由于浏览器存在安全策略，所以当访问的请求中的协议、域名、端口其中一个与本站不同时就会形成跨域，这里介绍一种比较简单的方案——jsonp。原理浏览器对 script、img这些带有src属性的的标签在发送请求时是不会触发跨域的校验&#xff…...

编程日记 2025/7/27 21:50:01

栈的应用,力扣394.字符串解码力扣946.验证栈序列力扣429.N叉树的层序遍历力扣103.二叉树的锯齿形层序遍历

目录力扣394.字符串解码力扣946.验证栈序列力扣429.N叉树的层序遍历力扣103.二叉树的锯齿形层序遍历力扣394.字符串解码看见括号，由内而外，转向用栈解决。使用两个栈处理，一个用String,一个用Integer 遇到数字:提取数字放入到数字栈…...

编程日记 2025/7/27 21:49:25

华为手机启用ADB无线调试功能

打开开发者模式，勾选USB调试，和“仅充电”模式下允许ADB调试确认设置添加adb路径到PATH变量使用adb查看安卓设置切换为无线模式：查看手机IP...

编程日记 2025/7/27 21:57:13

HTML 元素类型介绍

目录 1. 块级元素（Block-level Elements） 2. 行级元素（Inline Elements） 3. 行内块级元素（Inline-block Elements） 4. 表格相关元素 5. 列表相关元素 6. 表单相关元素示例代码示例效果编辑 …...

编程日记 2025/7/27 21:50:38

前端反向代理的配置和實現

反向代理是位於客戶端和服務器之間的一個中間層，它代表客戶端向伺服器發起請求，然後將伺服器的回應返回給客戶端。與傳統的正向代理不同，反向代理是由伺服器端配置的，客戶端通常不知道它的存在。在前端開發中，反向代理…...

编程日记 2025/7/27 21:48:03

日志分析工具

一、nginx_log_analysis工具 1、工具下载，http://linux5588.blog.51cto.com/，它是用python语言写的，只是用来分析nginx日志，它的输出比较简单，以IP为主，可以查看每个IP的访问的流量，次数&#…...

编程日记 2025/7/27 21:50:38

python: Serialize and Deserialize complex JSON using jsonpickle

编程日记 2025/7/27 1:27:55

【分布式锁解决超卖问题】setnx实现

目录使用场景的描述并发安全问题悲观锁与乐观锁问题一人一单的问题服务器负载均衡问题分布式锁分布式锁的实现获取锁释放锁实现思路误删情况的分析解决误删的方法代码优化分布式锁的原子性分析文章代码地址：分布式锁1.0 使用场景的描述今天的主人…...

编程日记 2025/7/27 21:47:29

【MySQL实战45讲笔记】基础篇——事务隔离

系列文章基础篇——MySQL 的基础架构基础篇——redo log 和 binlog 目录系列文章1. 事务隔离1.1 隔离性与隔离级别1.2 如何实现事务隔离1.3 事务的启动方式1.4 思考： 使用什么方案来避免长事务 1. 事务隔离简单来说，事务就是要保证一组数据库操作&…...

编程日记 2025/7/27 22:01:31

RFdiffusion calculate_igso3函数解读

calculate_igso3 函数旨在对 IGSO(3) 分布的概率密度函数 (PDF)、累积分布函数 (CDF)、以及相关统计量进行数值近似计算，特别用于预计算以加速后续操作（例如采样、反向扩散等）。 calculate_igso3函数源代码： def calculate_igso3(*, num_sigma, num_omega, min_sigma, ma…...

编程日记 2025/7/27 13:17:33

Vue3 + Vite 项目引入 postcss + tailwindcss

一、PostCSS 1. 简介 PostCSS 是一个强大的 CSS 处理工具，它本身是一个工具库，但其核心功能是通过插件扩展，来对 CSS 进行编译、转换和优化。它适用于现代 CSS 开发，提供更灵活、高效的方式来处理样式表。 2. 主要作用增强 CS…...

编程日记 2025/7/24 7:34:44

AI Large Language Model

AI 的 Large Language model LLM , 大语言模型： 是AI的模型，专门设计用来处理自然语言相关任务。它们通过深度学习和庞大的训练数据集，在理解和生成自然语言文本方面表现出色。常见的 LLM 包括 OpenAI 的 GPT 系列、Google 的 PaLM 和 Meta…...

编程日记 2025/7/27 22:06:14

Linux系统性能优化技巧

系统性能优化在当今的信息技术领域，Linux系统的性能优化变得越来越重要。随着Linux操作系统的广泛应用，从桌面环境到大型服务器集群，性能优化不仅可以提升系统的响应速度和吞吐量，还能降低资源消耗，从而延长硬件使用…...

编程日记 2025/7/24 19:40:02

基于CNN+RNNs（LSTM, GRU）的红点位置检测（pytorch）

1 项目背景需要在图片精确识别三跟红线所在的位置，并输出这三个像素的位置。其中，每跟红线占据不止一个像素，并且像素颜色也并不是饱和度和亮度极高的红黑配色，每个红线放大后可能是这样的。而我们的目标是精确输出每个红点的…...

编程日记 2025/7/27 19:54:37

【AI系统】GPU 架构回顾（从2018年-2024年）

Turing 架构 2018 年 Turing 图灵架构发布，采用 TSMC 12 nm 工艺，总共 18.6 亿个晶体管。在 PC 游戏、专业图形应用程序和深度学习推理方面，效率和性能都取得了重大进步。相比上一代 Volta 架构主要更新了 Tensor Core（专门为执行…...

编程日记 2025/7/26 15:14:37

Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现

LRU（Least Recently Used，最近最少使用）是通过记录缓存项的访问顺序来决定淘汰的策略：当缓存满时，移除最久未被使用的项。核心概念： 缓存存储：使用 Map 存储键值对，用于快速访问缓…...

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

联邦学习安全聚合算法综述（论文解析）以及如何确定自己研究方向的方法

自己写相关论文的方法： 可以重点看看综述类论文的未来研究方向和引言中前人已经做过的内容联邦学习安全聚合算法综述 auth:江萍 1 通讯作者李芯蕊 1 赵晓阳 2 杭永凯摘要摘要：随着深度学习技术的发展，人工智能在社会的各个方面有着重要…...

编程日记 2025/7/22 21:36:48

【JAVA 笔记】12 带有数据库文件的完整的JDBC访问例子，命令行界面

【JAVA 笔记】12 带有数据库文件的完整的JDBC访问例子，命令行界面代码结构解析 1. 导入必要的包 import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; import java.sql.PreparedStatement; impo…...

编程日记 2025/7/27 16:54:08

基于java+SpringBoot+Vue的在线宠物用品交易网站设计与实现

项目运行环境配置： Jdk1.8 Tomcat7.0 Mysql HBuilderX（Webstorm也行） Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术： Springboot mybatis Maven mysql5.7或8.0等等组成&#x…...

编程日记 2025/7/23 17:19:27

智慧社区管理系统平台提升物业运营效率与用户体验

内容概要智慧社区管理系统平台是一个集成了多项功能的综合性解决方案，旨在通过先进的技术手段提升物业管理的效率和居民的生活质量。该平台不仅关注物业运营的各个方面，还强调用户体验的重要性。随着科技的发展，社区管理方式正发生着翻天覆…...

编程日记 2025/7/27 12:19:27

el-table-column自动生成序号在序号前插入图标

实现效果： 代码如下： 在el-table里加入这个就可以了，需要拿到值可以用scope.$index <el-table-column type"index" label"序号" show-overflow-tooltip"true" min-width"40">…...

编程日记 2025/7/17 11:04:33

深度学习之目标检测的常用标注工具

1 LabelImg LabelImg 是一款开源的图像标注工具，标签可用于分类和目标检测，它是用 Python 编写的，并使用Qt作为其图形界面，简单好用。注释以 PASCAL VOC 格式保存为 XML 文件，这是 ImageNet 使用的格式。此外&…...

编程日记 2025/7/26 6:48:11

「Mac玩转仓颉内测版21」基础篇1 - 仓颉程序的基本组成

本篇将系统介绍Cangjie编程语言中程序的基本组成部分，涵盖 main 函数的定义、包与模块的使用、变量类型、作用域和代码结构原则，帮助开发者理解Cangjie程序的整体结构。关键词程序入口点main函数包与模块变量类型与作用域值类型与引用类型代码结构与规…...

编程日记 2025/7/22 15:55:14

【计算机网络】解决bind error

服务器有时可以立即重启，有时候无法立即重启 — bind error 首先要知道：四次挥手动作完成之后，主动断开连接的一方要维持一段时间的TIME_WAIT bind error原因：因为是服务器主动断开的，所以服务器要去维持TIME_WAIT状…...

编程日记 2025/7/10 12:18:43

【SVN和GIT】版本控制系统详细下载使用教程

文章目录 ** 参考文章一、什么是SVN和GIT二、软件使用介绍1 SVN安装1.1 服务端SVN下载地址1.2 客户端SVN下载地址2 SVN使用2.1 服务端SVN基础使用2.1.1 创建存储库和用户成员2.1.2 为存储库添加访问人员2.2 客户端SVN基础使用2.2.1 在本地下载库中的内容2.2.2 版本文件操作--更…...

编程日记 2025/7/22 23:35:21

初识 Pynecone：构建现代化 Web 应用的 Python 框架

初识 Pynecone：构建现代化 Web 应用的 Python 框架引言在 Web 开发的世界里，Python 是后端开发的常客，但如果想用 Python 直接构建现代化的前端应用会怎样？这正是 Pynecone 框架的用武之地！Pynecone 是一个全栈 Pyt…...

编程日记 2025/7/22 9:59:45

Go-RPC关键指标分析与企业实践

1.稳定性-保障策略熔断：保护调用方限流：保护被调用方超时控制：避免浪费 2.稳定性-请求成功率（用重复发送负载均衡） 3.稳定性-长尾请求（用备份请求） 4.稳定性-注册中间件易用性&#xff1a…...

编程日记 2025/7/22 19:58:09

社交电商专业赋能高校教育与产业协同发展：定制开发AI智能名片及2+1链动商城小程序的创新驱动

摘要：本文围绕社交电商有望成为高校常态专业这一趋势展开深入探讨，剖析国家政策认可下其学科发展前景，着重阐述在专业建设进程中面临的师资短缺及实践教学难题。通过引入定制开发AI智能名片与21链动商城小程序，探究如何借助这些新…...

编程日记 2025/7/23 10:50:54

Ubuntu下安装Qt

1.如图1所示，在Index of /archive上下载安装包； 图1 2.将图1安装包下载好之后，通过共享文件夹的方式拷贝到ubutntu，如图2所示； 图2 3.如图3所示，执行chmod x qt-creator-opensource-linux-x86_64-10.0.2.…...

编程日记 2025/7/23 10:39:27

《FreeRTOS任务删除篇》

任务删除函数源码1. 进入临界区1.1 第一步1.2 第二步1.3 第三步1.4 第四步 2. 获取待删除任务的任务控制块TCB3. 从就绪/延迟列表中删除任务4. 从事件列表中删除任务5. 如果待删除任务是当前运行的任务6. 如果待删除任务是其它任务7. 退出临界区7.1 第一步7.2 第二步7.3 第三步…...

编程日记 2025/7/26 19:39:33

取电快充协议芯片，支持全协议、内部集成LDO支持从UART串口读取电压电流消息

H004D 是一款支持全协议的受电端诱骗取电协议芯片，支持宽电压输入 3.3V~30V，芯片内部集成LDO，可输出 3.3V电压, 支持通过UART 串口读取电压电流，支持定制功能，芯片采用QFN_20封装，线路简单，芯片…...

编程日记 2025/7/24 2:21:45

Linux：自定义Shell

本文旨在通过自己完成一个简单的Shell来帮助理解命令行Shell这个程序。目录一、输出“提示” 二、获取输入三、切割字符串四、执行指令 1.子进程替换 2.内建指令一、输出“提示” 这个项目基于虚拟机Ubuntu22.04.5实现。打开终端界面如图所示。其中。之前&#x…...

编程日记 2025/7/26 11:51:30

git 基础之 merge 和 rebase 的比较

在团队软件开发过程中，代码合并是一个基本且频繁执行的任务。 Git 提供了多种合并代码的策略，其中最常用的是 merge 和 rebase。尽管二者的终极目标是相同的——整合代码变更——它们的方法和推荐的使用场景却有所区别。本文将详细介绍和比较这两种策…...

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

pve 磁盘选错位置修改

选中磁盘选择磁盘操作，移动存储改到你要迁移的位置，迁移后原来的文件如果没选择删除源不会删除，需要确认数据没问题后选择相应的文件，如果有快照，快照可能也需要提前删除，删除前请做好备份。...

编程日记 2025/7/1 13:45:55

C语言第十二周课——有趣的小程序

目录 1.我是猪关机程序 1.1dos命令（强制关机） 1.2思路 1.3源码 2.猜数字 2.1介绍 2.2思路 2.3源码 1.我是猪关机程序效果:运行程序后电脑在60s后关机，如果输入“我是猪”则取消关机；如果输入“你是猪”则立即关机&…...

编程日记 2025/7/24 21:51:03

【Linux学习】【Ubuntu入门】1-7 ubuntu下磁盘管理

1.准备一个U盘或者SD卡（插上读卡器），将U盘插入主机电脑，右键点击属性，查看U盘的文件系统确保是FAT32格式 2.右键单击ubuntu右下角图标，将U盘与虚拟机连接参考链接 3. Ubuntu磁盘文件：/dev/s…...

编程日记 2025/7/23 22:43:46

解决Windows + Chrome 使用Blob下载大文件时，部分情况下报错net:ERR_FAILED 200 (OK)的问题

背景： 部分线上用户反馈，下载文件会报错，但重启电脑又好了。测试无法复现。遂远程客户，发现在下载超过一定阈值大小的文件时，会报错。但直接点击下载链接，可以正常下载查阅代码，以前的写法是…...

编程日记 2025/7/22 2:20:38

SpringBoot多文件上传

多文件上传是在单文件上传的基础上修改而来，不了解单文件上传可以参考上一篇。以下在将修改部分展示如下： 一、修改upload.html文件： <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title&g…...

编程日记 2025/7/23 18:04:03

Jenkins修改LOGO

重启看的LOGO和登录页面左上角的LOGO 进入LOGO存在的目录 [roottest-server01 svgs]# pwd /opt/jenkins_data/war/images/svgs [roottest-server01 svgs]# ll logo.svg -rw-r--r-- 1 jenkins jenkins 29819 Oct 21 10:58 logo.svg #jenkins_data目录是我挂载到了/opt目录&…...

编程日记 2025/7/17 23:38:28

幼儿园管理系统｜Java｜SSM｜Vue｜前后端分离

【重要①】前后端源码万字文档部署文档【重要②】正版源码有问题包售后【包含内容】【一】项目提供非常完整的源码注释【二】相关技术栈文档【三】源码讲解视频【其它服务】【一】可以提供远程部署安装，包扩环境【…...

编程日记 2025/7/26 17:13:19

Unity 实现界面拖拽功能的脚本，通过IDragHandler 实现

using System; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems;namespace Assets.Scripts._1024 {class EVENTdome : MonoBehaviour, IPointerDownHandler, IBeginDragHandler, IDragHandler{//Unity 事件处理的几种方式//1 通过编辑…...

编程日记 2025/7/27 5:04:46

【042A】基于51单片机门禁系统【Proteus仿真+Keil程序+报告+原理图】

☆、设计硬件组成：51单片机最小系统RFID读卡器继电器蜂鸣器LED灯。 1、设计采用STC89C51/52、AT89C51/52、AT89S51/52作为主控芯片； 2、通过RC522读卡器读取IC卡信息，信息匹配继电器吸合门锁打开； 3、可通过上位机对IC卡进行注…...

编程日记 2025/7/26 10:38:53

数据库中的增删改查操作、聚合函数、内置函数、分组查询

数据库中的增删改查操作、聚合函数、内置函数、分组查询 CRUD简介Create 新增语法示例单⾏数据全列插⼊单⾏数据指定列插⼊多⾏数据指定列插⼊ Retrieve 检索语法⽰例构造数据 Select全列查询指定列查询查询字段为表达式为查询结果指定别名语法⽰例结果去重查询 Order by 排序…...

编程日记 2025/7/22 23:41:58