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

Webpack模块打包工具

news 来源：原创 2025/8/3 22:26:41

1. 认识webpack的基本用法步骤创建项目->下载webpack webpack-cli -> npm init -y -> package.json的scripts中配置webpack默认打包入口：src/index.js默认打包出口: dist/main.js2. 认识webpack.config.js的基本配置loader  -> 打包css，less,sass,图片，es6转es5plugins -> 自动生成html并且将打包的js注入进去entryoutputmode: 'none'

Webpack模块打包工具

webpack_demo 工程化从0-1配置完整版.rar

本章节通过从0到1的方式来配置出一个【工程化】项目结构，让大家了解Node+Webpack是如何做工程化配置的。

学完本章节后，你能知道工程化的基本原理，为将来使用vue的工程化开发打下基础

Webpack基本概念

Webpack 是一个静态模块（如 JavaScript 文件、样式表、图片等）打包工具，从入口构建依赖图，打包有关的模块，将这些模块组合成少量的捆绑包（通常是单个文件），以便在浏览器中高效加载和执行。

Webpack 的作用：对静态模块的内容进行压缩，整合，转译等操作（前端工程化）

- 把 less/sass 转成 css 代码
- 把 ES6+ 降级成 ES5 等
- 支持多种模块文件类型，多种模块标准语法

体验Webpack打包

需求：封装 utils 包，校验用户名和密码长度，在 index.js 中使用，使用 Webpack 打包

需求流程图：

步骤：

新建项目文件夹 webpack_demo，初始化包环境，得到 package.json 文件

npm init -y

新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用

- src/utils/check.js

/*** 目标：封装检验用户名和密码长度的函数*/
export const checkUserName = uname => {return uname.length >= 8
}
export const checkPassWord = pwd => {return pwd.length >= 6
}

- src/index.js

/*** 目标：引入工具函数使用*/
import { checkUserName, checkPassWord } from './utils/check.js'
const unameResult = checkUserName('itheima007')
const pwdResult = checkPassWord('7654321')
console.log(unameResult, pwdResult)

下载 webpack webpack-cli 到项目（版本独立）

npm i webpack webpack-cli --save-dev

需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用

项目中运行工具命令，采用自定义命令的方式（局部命令）

npm run build

npm run 跟上package.json中的scripts中自定义命令名字

注意：实际上在终端运行的是 build 右侧的具体命名

自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

总结：

使用webpack的基本流程

1. 创建一个空白文件夹，使用 npm init -y初始化package.json文件
2. 准备你想要开发功能的各种模块代码(index.js utlis/check.js)
3. 使用 npm i webpack webpack-cli
4. 在package.json的scripts节点配置好： "build":"webpack"
5. 打开终端，执行 npm run build 自动根据入口查找相关的依赖，最终打包

webpack的默认查找方式
a. 默认会查找src这个目录中的index.js （入口路径）

1. 默认的输出路径: dist/main.js

修改 Webpack 打包入口和出口

Webpack 配置：影响 Webpack 打包过程

步骤：

1. 项目根目录，新建 webpack.config.js 配置文件

1. 导出配置对象，配置入口，出口文件路径

const path = require('path')
module.exports = {mode: 'none', // 不压缩，方便查看打包后的app.js中的代码entry: path.resolve(__dirname, 'src/main.js'), // 入口output: { // 出口path: path.resolve(__dirname, 'dist'),filename: 'app.js',clean: true // 先清空 dist，然后再输出最新内容}
}

1. 重新打包观察

图解：

案例-注册用户-长度判断

需求：点击注册按钮，判断用户名和密码长度是否符合要求

步骤：

1. 新建 public/index.html 准备网页模板（方便查找标签和后期自动生成 html 文件做准备）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我是一个网页</title>
</head><body><div class="box"><div class="img-wrap"><img class="logo-img" src="" alt=""></div><div class="login-wrap"><form action="javascript:;"><div class="form-item"><span>用户名：</span><input type="text" class="username"></div><div class="form-item"><span>密码：</span><input type="password" class="password"></div><div class="form-item"><button class="login-btn">注 册</button></div></form></div></div>
</body></html>

1. 核心 JS 代码写在 src/main.js 打包入口文件

/*** 目标：点击注册，检验用户名和密码长度*/
document.querySelector('.login-btn').addEventListener('click', () => {const username = document.querySelector('.username').valueconst password = document.querySelector('.password').valueif (!checkUserName(username)) {alert('用户名长度要大于等于8位')return} else if (!checkPassWord(password)) {alert('密码长度要求大于等于6位')return}console.log('用户名和密码长度符合要求')
})

1. 运行自定义命令，让 Webpack 打包 JS 代码

1. 手动复制 index.html 到 dist 下，手动引入打包后的 JS 代码文件，运行 dist/index.html 在浏览器查看效果

Webpack 自动生成 html 文件

插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源

步骤：

1. 下载 html-webpack-plugin 本地软件包到项目中

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

1. 配置 webpack.config.js 让 Webpack 拥有插件功能

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// ...plugins: [ // 插件列表new HtmlWebpackPlugin({minify:false, //true：压缩html(默认为true)  false：不压缩html template: path.resolve(__dirname, 'public/index.html') // 以指定的 html 文件作为生成模板})]
};

1. 指定以 public/index.html 为模板复制到 dist/index.html，并自动引入其他打包后资源

运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

05.Webpack-打包 css 代码

Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器

介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码

- 加载器 css-loader：解析 css 代码

- 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

步骤：

1. 准备 css 文件引入到 src/main.js 中（压缩转译处理等）

.box{width: 300px;height: 300px;margin: 50px auto;
}.login-btn{background-color: #0094ff;width: 200px;height: 30px;
}form{height: 100px;display: flex;flex-direction: column;justify-content: space-between;
}

/*** 目标：引入 css 文件内容*/
import './css/index.css'

注意：这里css只是引入代码内容让 Webpack 处理，不需定义变量接收在 JS 代码中继续使用，所以没有定义变量接收

1. 下载 css-loader 和 style-loader 本地软件包

npm i css-loader style-loader --save-dev

1. 配置 webpack.config.js 让 Webpack 拥有该加载器功能

// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表{test: /\.css$/i, // 匹配 .css 结尾的文件use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM}]}
};

1. 运行npm run build 打包后运行 dist/index.html 观察效果，看看准备好的样式是否作用在网页上

06.Webpack-打包 less 代码

LESS是一种 CSS 预处理器，它扩展了 CSS 的功能，允许开发者使用变量、嵌套规则、等特性来编写更简洁、更易维护的css。

@color:#00ff00;
.box{width: 300px;height: 300px;margin: 50px auto;.login-btn{background-color: @color;width: 200px;height: 30px;}form{height: 100px;display: flex;flex-direction: column;justify-content: space-between;}}

通过 LESS 编写的代码需要通过webpack转换成标准的 CSS 代码，以便浏览器能够理解并应用

加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

步骤：

1. 准备 less 样式引入到 src/main.js 中

@color:#00ff00;
.box{width: 300px;height: 300px;margin: 50px auto;.login-btn{background-color: @color;width: 200px;height: 30px;}form{height: 100px;display: flex;flex-direction: column;justify-content: space-between;}}

/*** 目标：引入 less 文件内容*/
import './css/index.less'

1. 下载 less 和 less-loader 本地软件包

npm i less less-loader --save-dev

1. 配置 webpack.config.js 让 Webpack 拥有功能

// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{test: /\.less$/i,use: [// compiles Less to CSS'style-loader','css-loader','less-loader',],},]}
};

1. 打包后运行 dist/index.html 观察效果

Webpack-打包图片

样式中导入图片

资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader即可自动解析

步骤：

1. 准备图片素材到 src/assets 中（存放资源模块 - 图片/字体图标等）

1. 在 index.less 中给 body 添加背景图

body{background-image: url(../assets/background.png);
}

npm run build观察结果 ->成功

js中import导入图片

在 main.js 中给 img 标签添加 logo 图片,webpack需要额外配置规则

/*** 目标：要给 img 标签设置一个 logo 图片* 注意：再赋予给 img 的 src 属性图片的时候，需要把图片数据对象引入过来*/
import imgObj from './assets/logo.png'
document.querySelector('.logo-img').src = imgObj

1. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{ // 针对资源模块（图片，字体文件，图标文件等）处理test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset', // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下generator: { // 输出文件时，路径+名字filename: 'assets/[hash][ext]'}}]}
};

1. 打包后运行 dist/index.html 观察效果

注意：

- 小于 8KB 文件会被转成 data URI（base64 字符串）打包进 JS 文件中（好处：可以减少网络请求次数，缺点：增加 30% 体积）
- 大于 8KB 文件会被复制到 dist 下，自动替换使用代码的图片名字

Webpack 集成 babel 编译器

babel 定义：是一个 JavaScript 语法编译器，将采用 ES6语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

ES5 和 ES6 是 ECMAScript（JavaScript 的标准）的两个不同的重要版本，它们代表了语言特性和语法的发展的两个阶段。

ES5 (ECMAScript 5) 发布日期：2009年，它引入了一些新的方法和特性，比如：

ES5 引入了许多数组实用方法，如 forEach, map, filter, reduce ；内置了 JSON 解析

ES6 (ECMAScript 2015) 发布日期：2015年，它带来了很多新特性：

let 和 const，箭头函数，模板字符串，解构赋值，模块化(import 和export)

babel-loader：让 Webpack 可以使用 babel 转译 JavaScript 代码

步骤：

1. 编写一段映射数组元素，每个数值 + 1 的代码（要求用箭头函数）

/*** 目标：让 Webpack + Babel 编译降级 JS 语法*/
//✨✨✨ es6写法
const arr = [1, 2, 3]
const result = arr.map(val => val + 1)
console.log(result)// ✨✨✨es5写法
var arr = [1, 2, 3]
var result = arr.map(function (val) {return val + 1
});
console.log(result)

1. 下载 babel babel-loader core 本地软件包

npm i babel-loader @babel/core @babel/preset-env -D

1. 配置 webpack.config.js 让 Webpack 拥有功能

// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{test: /\.js$/,exclude: /(node_modules)/, // 排除指定目录里的 js （不进行编译降级）use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'] // 预设规则}}}],}
};

1. 打包运行 dist/index.html 观察效果

各个软件包的作用表格：

模块	作用
@babel/core	Js 编译器，分析代码
@babel/preset-env	babel 预设，规则
babel-loader	让 webpack 翻译 js 代码

Webpack 打包模式

打包模式：告知 Webpack 使用相应模式的内置优化
分类：

模式名称	模式名字	特点
开发模式	development	调试代码，实时加载，模块热替换等
生产模式	production	压缩代码，资源优化，更轻量等

如何设置影响 Webpack呢？

- 方式1：在 webpack.config.js 配置文件设置 mode 选项

// ...module.exports = {// ...mode: 'production'
}

- 方式2：在 package.json 命令行设置 mode 参数

"scripts": {"build": "webpack --mode=production","dev": "webpack  --mode=development"
},

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

Webpack 开发服务器

每次改动代码，都要重新打包，很麻烦，所以这里给项目集成 webpack-dev-server 开发服务器

作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

步骤；

1. 下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server --save-dev

1. 配置自定义命令，并设置打包的模式为开发模式

"scripts": {// ..."dev": "webpack serve --open --mode=development"
},

1. 使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果

在 js / css 文件中修改代码保存后，会实时反馈到浏览器

【字节二面-面试题】你是如何优化webpack打包速度的？

使用webpack-dev-server 来优化
它优化的原理是什么？使用它之前，webpack默认是全量打包，文件越多，打包速度越慢，使用上webpack-dev-server之后，它会监控项目文件内容的改变，当文件内容有改变，只重新打包改变的部分，是增量打包，打包内容少，速度就快

案例-注册用户-完成功能

需求：使用工程化的方式，完成注册用户功能的开发

步骤：

1. 使用 npm 下载 axios

npm i axios

1. 引入到 src/main.js 中编写业务实现

/*** 目标：基于 axios 完成注册用户功能*/
import axios from 'axios'
document.querySelector('.login-btn').addEventListener('click', () => {const username = document.querySelector('.username').valueconst password = document.querySelector('.password').valueif (!checkUserName(username)) {alert('用户名长度要大于等于8位!!!')return} else if (!checkPassWord(password)) {alert('密码长度要求大于等于6位')return}console.log('用户名和密码长度符合要求')axios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username,password}}).then(result => {alert(result.data.message)}).catch(error => {alert(error.response.data.message)})
})

1. 打包后运行 dist/index.html 观察效果

注册用户功能图解：

Webpack 开发环境调错 source map

source map：可以准确追踪 error 和 warning 在原始代码的位置

问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）

设置：webpack.config.js 配置 devtool 选项

// ...module.exports = {// ...devtool: 'inline-source-map'
}

inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

✨✨注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

Webpack 设置解析别名路径

解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单

例如：

1. 原来路径如下：

import { checkUsername,  checkPassword } from '../src/utils/check.js'

1. 配置解析别名：在 webpack.config.js 中设置

// ...module.exports = {// ...resolve: {alias: {MyUtils: path.resolve(__dirname, 'src/utils'),'@': path.resolve(__dirname, 'src')}}
}

1. 这样我们以后，引入目标模块写的路径就更简单了

import { checkUsername,  checkPassword } from 'MyUtils/check.js'
import { checkUsername,  checkPassword } from '@/utils/check.js'

修改代码的路径后，重新打包观察效果是否正常！

黑马就业平台-webpack工程化改造：

webpack打包.zip

Webpack模块打包工具

1. 认识webpack的基本用法步骤创建项目->下载webpack webpack-cli -> npm init -y -> package.json的scripts中配置webpack默认打包入口：src/index.js默认打包出口: dist/main.js2. 认识webpack.config.js的基本配置loader -> 打包css，less…...

编程日记 2025/8/3 22:26:41

crossOriginLoading使用说明

1. 说明此配置用于控制 Webpack 动态加载的代码块（chunk）（例如代码分割或懒加载的模块）在跨域（不同域名）加载时的行为。它通过为动态生成的 <script>标签添加 crossorigin 属性，确保符合…...

编程日记 2025/7/29 4:33:44

Linux系统性能调优技巧分享

在数字化时代，Linux 系统以其开源、稳定、高效的特性，成为服务器、云计算、物联网等领域的核心支撑。然而，随着业务规模的扩大和负载的增加，系统性能问题逐渐凸显。掌握 Linux 系统性能调优技巧，不仅能提升系统运行效率，还能降低运维成本。下面从多个方面介绍实用的性能调…...

编程日记 2025/7/29 10:02:53

在Windows11中配置Git+SSH环境，本此实践使用Gitee（码云），方法同样适用于其它绝大部分Git服务

1.下载并安装Git 进入官网下载 Git - Downloading Package 选择下载Standalone Installer安装包，看自己电脑是64-bit还是32-bit（一般都是64-bit） 双击安装包进行安装，Next 这里可以自定义安装路径这里可以勾选添加桌面快捷方式…...

编程日记 2025/7/29 17:24:11

【软考-架构】14、软件可靠性基础

✨资料&文章更新✨ GitHub地址：https://github.com/tyronczt/system_architect 文章目录软件可靠性基本概念软件可靠性建模软件可靠性管理软件可靠性设计N版本程序设计恢复块设计（动态冗余）双机容错技术、集群技术负载均衡软件可靠性测试…...

编程日记 2025/8/1 8:00:40

怎样理解ceph?

Ceph 是一个开源的、高度可扩展的分布式存储系统，设计用于提供高性能、高可靠性的对象存储（Object）、块存储（Block）和文件存储（File）服务。它的核心思想是通过去中心化的架构和智能的数据分布策…...

编程日记 2025/7/31 20:34:32

《AI大模型趣味实战》智能Agent和MCP协议的应用实例：搭建一个能阅读DOC文件并实时显示润色改写过程的Python Flask应用

智能Agent和MCP协议的应用实例：搭建一个能阅读DOC文件并实时显示润色改写过程的Python Flask应用引言随着人工智能技术的飞速发展，智能Agent与模型上下文协议(MCP)的应用场景越来越广泛。本报告将详细介绍如何基于Python Flask框架构建一个智能应用&…...

编程日记 2025/8/3 22:23:07

Pygame字体与UI：打造游戏菜单和HUD界面

Pygame字体与UI：打造游戏菜单和HUD界面在现代游戏中，用户界面（UI）是玩家与游戏互动的重要桥梁。一个精心设计的UI不仅能够提升游戏的视觉效果，还能增强玩家的游戏体验。Pygame作为一个强大的游戏开发库，提供了丰富的工具和方法来创建和管理UI元素。本文将详细介绍如何使…...

编程日记 2025/7/31 1:29:39

游戏引擎学习第246天:将 Worker 上下文移到主线程创建

回顾并为今天的工作做准备关于GPU驱动bug的问题，目前本地机器上没有复现。如果有问题，昨天的测试就应该已经暴露出来了。当前演示的是游戏的过场动画，运行正常，使用的是硬件渲染。之前使用软件渲染时没有遇到太多问题&#xff…...

编程日记 2025/8/3 1:34:52

系统设计(2)—Redis—消息队列—数据库—熔限降

Redis 缓存设计在高并发系统中，缓存是提升性能、减轻后端负载的杀手锏。Redis 作为内存级的高性能缓存数据库，被广泛应用于各类系统设计中。利用 Redis，将热点数据存储在内存中，可以加速读写并大幅降低对后端关系型数据库的直接…...

编程日记 2025/8/3 22:24:54

第十六届蓝桥杯大赛软件赛省赛第二场 C/C++ 大学 A 组

比赛还没有开始，竟然忘记写using namespace std; //debug半天没看明白 (平时cv多了然后就是忘记那个编译参数，（好惨的开局编译参数-stdc11 以下都是赛时所写代码，赛时无聊时把思路都打上去了（除了倒数第二题&#…...

编程日记 2025/8/3 1:53:05

HiSpark Studio如何使用Trae（Marscode）插件

引言我现在非常喜欢使用编程辅助插件，用的最多的是Trae（以前叫Marscode）。以前华为的DevEco Device Tools是基于VSCode的，直接使用官方的插件市场就可以安装了。现在海思提供了自己的HiSpark Studio，比原来的Device …...

编程日记 2025/8/3 22:26:39

Netmiko连接池与长连接优化

背景与原理在网络自动化中，频繁创建和断开 SSH 连接会带来以下问题： 性能损耗：每次连接需经历 TCP 握手、SSH 协商、用户认证等流程，耗时约 1~3 秒。资源浪费：设备端可能限制并发连接数，频繁连接易触发阈…...

编程日记 2025/7/23 13:46:52

10：00面试，10:08就出来了，面试问的问题太。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%,这…...

编程日记 2025/7/30 4:38:36

从基础到实战的量化交易全流程学习：1.2 金融市场基础

从基础到实战的量化交易全流程学习：1.2 金融市场基础在量化交易领域，扎实的金融市场基础是策略开发与风险控制的核心支撑。本文将从交易品种、市场机制、监管合规三方面展开，结合市场特性、真实数据案例及实践要点进行系统化解析&#xff0c…...

编程日记 2025/7/29 23:55:45

游戏状态管理：用Pygame实现场景切换与暂停功能

游戏状态管理：用Pygame实现场景切换与暂停功能在开发游戏时，管理游戏的不同状态（如主菜单、游戏进行中、暂停等）是非常重要的。这不仅有助于提升玩家的游戏体验，还能使代码结构更加清晰。本文将通过一个简单的示例，展示如何使用Pygame库来实现游戏中的场景切换和暂停功…...

编程日记 2025/7/30 16:16:35

数据资产价值及其实现路径-简答题回顾

1. 简述数据资产的定义及其特征。答案：数据资产是指企业或组织所拥有的、具有经济价值的数据资源。它具有以下特征：可复制性（数据可以多次使用）、价值潜力（数据经过处理、分析可以创造经济价值）、流动性&…...

编程日记 2025/8/3 4:25:20

Docker化HBase排错实录：从Master hflush启动失败到Snappy算法未支持解决

前言在容器化时代，使用 Docker 部署像 HBase 这样复杂的分布式系统也比较方便。社区也提供了许多方便的 HBase Docker 镜像，没有找到官方的 apache的，但有包含许多大数据工具的 harisekhon/hbase 或用于学习目的的 bigdatauniversity/hbase…...

编程日记 2025/7/28 23:00:32

端到端自动驾驶的数据规模化定律

25年4月来自Nvidia、多伦多大学、NYU和斯坦福大学的论文“Data Scaling Laws for End-to-End Autonomous Driving”。自动驾驶汽车 (AV) 栈传统上依赖于分解方法，使用单独的模块处理感知、预测和规划。然而，这种设计在模块间通信期间会引入信息丢失&am…...

编程日记 2025/8/1 8:47:56

桌面端开发技术栈选型：开启高效开发之旅

在数字化浪潮中，桌面端应用依然占据重要地位，而选择合适的技术栈是打造优质桌面端应用的关键一步。以下是多种主流桌面端开发技术栈的介绍与对比，希望能为大家提供有价值的参考。基于 Web 技术的跨平台框架 • Electron： • 特…...

编程日记 2025/7/31 1:43:01

C++模拟Java C#的 finally

在 Java 和 C# 中，finally 是一个与异常处理（try-catch）配合使用的关键字，用于确保一段代码无论是否发生异常都会被执行。它通常用于释放资源（如文件句柄、数据库连接、锁等），避免内存泄漏或状态…...

编程日记 2025/7/31 8:30:21

Spring Boot安装指南

🔖 Spring Boot安装指南 🌱 Spring Boot支持两种使用方式： 1️⃣ 可作为常规Java开发工具使用 2️⃣ 可作为命令行工具安装 ⚠️ 安装前提： 📌 系统需安装 Java SDK 17 或更高版本 🔍 建议先运行检查命令…...

编程日记 2025/7/31 22:48:39

zephyr架构下Bluetooth advertising接口

目录概述 1 函数接口 2 主要函数介绍 2.1 bt_le_adv_start函数 2.1.1 函数功能介绍 2.1.2 典型使用示例 2.1.3 广播间隔 2.1.4 注意事项 2.2 bt_le_adv_stop 函数 2.2.1 函数功能 2.2.2 使用方法介绍 2.2.3 实际应用示例 2.2.4 关键注意事项 2.2.5 常见问题解决 …...

编程日记 2025/8/2 20:48:03

Oracle官宣 MySQL+APEX+AI三认证限时免费

1 MySQL8 OCP 考试代码 1Z0-908 免费时间：2025年4月20日至7月31日 https://education.oracle.com/mysql-promo 2 APEX云开发专家考试代码 1Z0-771 免费时间：2025年5月15日截止！ https://mylearn.oracle.com/ou/learning-path/become…...

编程日记 2025/7/26 8:37:02

深入理解N皇后问题：从DFS到对角线优化

N皇后问题是一个经典的算法问题，要求在NN的棋盘上放置N个皇后，使得它们互不攻击。本文将全面解析该问题的解法，特别聚焦于DFS算法和对角线优化的数学原理。问题描述在NN的国际象棋棋盘上放置N个皇后，要求： 任意两个…...

编程日记 2025/7/30 15:32:33

1软考系统架构设计师：第一章系统架构概述 - 超简记忆要点、知识体系全解、考点深度解析、真题训练附答案及解析

超简记忆要点一、考试大纲目标：架构设计能力（需求→架构）能力：技术/方法/行业科目：综合（选择）、案例（问答）、论文（论述） 二、架构核心定义…...

编程日记 2025/7/24 11:30:46

MuJoCo 关节角速度记录与可视化，监控机械臂运动状态

视频讲解： MuJoCo 关节角速度记录与可视化，监控机械臂运动状态代码仓库：GitHub - LitchiCheng/mujoco-learning 关节空间的轨迹优化，实际上是对于角速度起到加减速规划的控制，故一般来说具有该效果的速度变化会显得丝…...

编程日记 2025/7/30 4:48:19

如何打包python程序为可执行文件

将 Python 程序打包为可执行文件是一个常见需求，尤其是在希望将应用程序分享给不具备 Python 环境的用户时。以下是使用 PyInstaller 工具将 Python 程序打包为可执行文件的步骤。步骤 1：安装 PyInstaller 如果您还没有安装 PyInstaller，请…...

编程日记 2025/8/1 1:09:57

产销协同是什么？产销协同流程有哪些？

目录一、产销协同是什么 1.从市场需求的角度来看 2.企业内部运营的角度来看 3.从供应链的角度来看二、实现产销协同的八大步骤 1. 市场需求预测 2. 销售计划制定 3. 生产能力评估 4. 生产计划制定 5. 库存管理 6. 信息共享与沟通 7. 订单执行与跟踪 8. 绩效评估…...

编程日记 2025/7/26 4:15:17

SQL 查询进阶：WHERE 子句与连接查询详解

SQL（Structured Query Language）是管理关系型数据库的核心语言，熟练掌握其查询功能对于数据处理至关重要。本文将深入探讨 SQL 中的两个关键概念：WHERE 子句和连接查询。我们将详细讲解 WHERE 子句中的模糊查询、IS NULL、IS NOT …...

编程日记 2025/8/1 14:39:36

【计算机视觉】CV实战项目- DFace: 基于深度学习的高性能人脸识别

图：MTCNN的三阶段网络结构（P-Net、R-Net、O-Net） DFace深度解析：基于深度学习的高性能人脸识别深度解析DFace：基于PyTorch的实时人脸检测与识别系统技术背景与项目概述核心功能与特点实战部署指南环境准备硬件要求软…...

编程日记 2025/8/1 17:51:08

基于Docker、Kubernetes和Jenkins的百节点部署架构图及信息流描述

以下是基于Docker、Kubernetes和Jenkins的百节点部署架构图及信息流描述，使用文本和Mermaid语法表示：架构图（Mermaid语法） #mermaid-svg-WWCAqL1oWjvRywVJ {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-WWCAq…...

编程日记 2025/7/23 4:38:59

百度搜索AI开放计划：让应用连接精准流量的秘诀

引言在人工智能技术深刻改变各行各业的今天，每天都有许多AI应用诞生。然而无论是开发者还是用户依然会感到自己的应用鲜有人使用或是需求没有被充分满足。这种情况正说明了为什么我们需要SEO流量，而一个能够与AI应用直接相关的SEO平台更是呼之欲出。百度…...

编程日记 2025/8/1 0:33:54

Redis数据结构SDS,IntSet,Dict

1.字符串：SDS SDS的底层是C语言编写的构建的一种简单动态字符串简称SDS，是redis比较常见的数据结构。由于以下几种缺点，Redis并没有直接采用C语言的字符串。 1.获取长度需要计算 2.非二进制安全 ：中间不能有 \0，…...

编程日记 2025/7/27 7:10:15

leetcode201.数字范围按位与

找到公共前缀部分，然后后面的部分全0 class Solution {public int rangeBitwiseAnd(int left, int right) {int offset 0;while (left ! right) {offset;left left >> 1;right right >> 1;}return right << offset;} }...

编程日记 2025/7/29 2:36:32

云服务器 —— 公有 IP 与私有 IP

云服务器的公有 IP 和私有 IP 在网络架构中扮演不同的角色，具体用途和区别如下： 目录 1. 公有 IP（Public IP） 作用： 特点： 示例场景： 2. 私有 IP（Private IP） 作用…...

编程日记 2025/7/29 17:57:53

北斗导航｜ Transformer增强BiLSTM网络的GNSS伪距观测量误差探测

在GNSS（全球导航卫星系统）定位中，伪距观测量的误差直接影响定位精度。结合Transformer和LSTM的优势，可以设计一种混合模型以提升误差探测能力。以下是具体的技术实现方案： 1. 模型架构设计 1.1 输入特征设计原始GNSS观测数据：伪距观测值（C/A码、P码）、载波相位、多普…...

编程日记 2025/8/1 13:22:52

0803分页_加载更多-网络ajax请求2-react-仿低代码平台项目

文章目录 1 分页1.1 url与分页参数1.2 分页组件与url1.3 列表页引用分页组件 2 加载更多2.1 状态2.2 触发时机2.3 加载数据2.4优化结语 1 分页 1.1 url与分页参数查询问卷列表接口，添加分页参数： page：当前页码（第几页&#…...

编程日记 2025/7/31 13:26:12

React 与 Vue 的区别：你会选择哪个框架呢

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/7/14 4:49:13

Jmeter如何取JDBC request响应参数作为下一个接口的值？

1、功能参数说明 Variable Name：数据库连接池的名字，需要与JDBC Connection Configuration的Variable Name Bound Pool名字保持一致 Query：填写的sql语句未尾不要加“;” Parameter valus：参数值,对查询条件进行参数化 Paramete…...

编程日记 2025/7/30 12:36:30

【C++】14.容器适配器 | stack | queue | 仿函数 | priority_queue

1. 容器适配器什么是适配器适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结)，该种模式是将一个类的接口转换成客户希望的另外一个接口。在C中，容器适配器（Container Adapters&…...

编程日记 2025/8/2 16:27:07

论文阅读：2025 arxiv Aligning to What? Limits to RLHF Based Alignment

Aligning to What? Limits to RLHF Based Alignment https://arxiv.org/pdf/2503.09025 https://www.doubao.com/chat/3871529075012866 速览这篇论文主要探讨了强化学习从人类反馈（RLHF）在对齐大型语言模型（LLMs）时的局限性…...

编程日记 2025/8/2 16:16:33

利用Arcgis自己绘制shp文件

1.选择自己想要创建的shp文件的位置我是直接创建在连接文件夹中 2.右键-新建-shp 3.设置名称、要素类型、空间参考 4、点击创建要素 5、右侧选择图层、创建面 6、开始绘制，双击任意位置结束绘制之后可以改一下shp文件的名字...

编程日记 2025/8/2 17:16:51

路由器重分发（OSPF+静态路由）

路由器重分发（OSPF静态路由） 静态路由充当不了翻译官 OSPF路由 OSPF路由需要宣告自己的ip， Router(config)#router ospf 1 Router(config-router)#network 10.10.10.0 0.0.0.255 area 0还要帮静态路由的也宣告一下 Router(config)#ip route…...

编程日记 2025/8/3 1:25:15

KTT入门

Kinetic tournament tree 简称 KTT 下文中全部简写。 KTT 用于解决类以下问题：已知 N N N 条一次函数，求解一段区间内函数最大值。支持修改操作可以修改 x i x_i xi 或者 b i b_i bi 的值。具体做法：我们考虑线段树来维护一个类似 Δ \Delta Δ 的东西，我们令当…...

编程日记 2025/7/29 16:57:11

WPF 上位机开发模板

WPF 上位机开发模板 WPF上位机开发模板，集成了基础操作菜单、海康视觉实时图像界面、串口通讯、网口通讯、主流PLC通讯、数据存储、图片存储、参数配置、权限管理、第三方webapi接口接入、数据追溯与查询等功能。一、项目结构 WpfSupervisor/ ├── Models/ …...

编程日记 2025/7/30 15:36:40

理想星环OS选择NuttX作为MCU侧OS的核心原因分析

文章目录引言一、POSIX兼容性：降低汽车软件迁移成本二、轻量级与模块化：适配MCU资源约束三、硬实时性能：保障车辆控制确定性四、多芯片适配：加速车企供应链灵活性五、安全与可靠性：构建纵深防御体系六、社区与生态&am…...

编程日记 2025/7/29 4:40:08

IP数据报发送和转发的过程

1. 发送端准备数据应用程序（比如浏览器）要发送数据，比如访问一个网站。应用层（HTTP） → 传输层（TCP/UDP） → 网络层（IP）。 IP层负责把数据包打包，加上必要…...

编程日记 2025/7/28 19:37:29

Pinia 详细解析：Vue3 的状态管理利器

一、Pinia 概述 Pinia 是 Vue 3 的官方推荐状态管理库，由 Vue 核心团队维护。它是对 Vuex 的改进和简化，提供了更简洁的 API 和更好的 TypeScript 支持。 Pinia 的核心优势更简单的 API：相比 Vuex 减少了概念和模板代码完美的 TypeScript…...

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

pytorch python常用指令

一、常用的conda指令创建新的python环境 conda create -n env_name python3.x 查看已有的python环境 conda env list 进入已有的python环境 conda activate env_name 退出当前的python环境 conda deactivate 二、常用的pip指令 pip install -r requirements.txt 根据…...

编程日记 2025/7/23 21:30:48

Webpack模块打包工具

Webpack基本概念

体验Webpack打包

修改 Webpack 打包入口和出口

案例-注册用户-长度判断

Webpack 自动生成 html 文件

05.Webpack-打包 css 代码

06.Webpack-打包 less 代码

Webpack-打包图片

样式中导入图片

js中import导入图片

Webpack 集成 babel 编译器

Webpack 打包模式

Webpack 开发服务器

【字节二面-面试题】你是如何优化webpack打包速度的？

案例-注册用户-完成功能

Webpack 开发环境调错 source map

Webpack 设置解析别名路径

相关文章：