Webpack看这篇就够了

    💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。



非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
 

前言

本文将详细地讲解webpack的基础入门知识，如果对大家有帮助，请一键三连哦!

目录

1.Webpack

2.Webpack 修改入口和出口

3. Webpack 自动生成 html 文件

4.Webpack-打包 css 代码

5. 优化-提取 css 代码

6. 优化压缩过程

7. Webpack-打包 less 代码

8. Webpack-打包 less 代码

9. Webpack-打包图片

10.Webpack 搭建开发环境

11. Webpack 打包模式

12.Webpack 打包模式的应用

13.Webpack 前端注入环境变量

14.Webpack 开发环境调错 source map

15.Webpack 设置解析别名路径

16.Webpack 多页面打包

1.Webpack

1.Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

2.静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件

3.打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包

4.Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）

步骤：

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

npm init -y

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

src/utils/check.js

// 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6

src/index.js

/*** 目标1：体验 webpack 打包过程*/
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from '../utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
// 1.2 准备 webpack 打包的环境
// 1.3 运行自定义命令打包观察效果（npm run 自定义命令）

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

npm i webpack webpack-cli --save-dev

注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用

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

npm run build

npm run 自定义命令名字

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

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

2.Webpack 修改入口和出口

  1. Webpack 配置：影响 Webpack 打包过程

  2. 步骤：

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

  2. 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

const path = require('path')module.exports = {entry: path.resolve(__dirname, 'src/login/index.js'),output: {path: path.resolve(__dirname, 'dist'),filename: './login/index.js'  }
}

      3.重新打包观察

3. Webpack 自动生成 html 文件

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

2.步骤：

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

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

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

// ...
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// ...plugins: [new HtmlWebpackPlugin({template: './public/login.html', // 模板文件filename: './login/index.html' // 输出文件})]
}

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

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

4.Webpack-打包 css 代码

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

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

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

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

  3. 步骤：

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

/*** 目标5：打包 css 代码*  5.1 准备 css 代码，并引入到 js 中*  5.2 下载 css-loader 和 style-loader 本地软件包*  5.3 配置 webpack.config.js 让 Webpack 拥有该加载器功能*  5.4 打包后观察效果*/
// 5.1 准备 css 代码，并引入到 js 中
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

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

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

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

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

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

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

5. 优化-提取 css 代码

  1. 需求：让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中

  2. 需要：mini-css-extract-plugin 插件来实现

  3. 步骤：

下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i --save-dev mini-css-extract-plugin

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

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

  1. 打包后观察效果

  2. 注意：不能和 style-loader 一起使用

  3. 好处：css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

6. 优化压缩过程

  1. 需求：把提出的 css 文件内样式代码压缩

  2. 需要：css-minimizer-webpack-plugin 插件来实现

  3. 步骤：

    // ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {// ...// 优化optimization: {// 最小化minimizer: [// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）`...`,new CssMinimizerPlugin(),],}
};

下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i css-minimizer-webpack-plugin --save-dev

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

// ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {// ...// 优化optimization: {// 最小化minimizer: [// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）`...`,new CssMinimizerPlugin(),],}
};

打包后观察 css 文件内自己代码是否被压缩了

7. Webpack-打包 less 代码

  1. 需求：把提出的 css 文件内样式代码压缩

  2. 需要：css-minimizer-webpack-plugin 插件来实现

  3. 步骤：

下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i css-minimizer-webpack-plugin --save-dev

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

// ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {// ...// 优化optimization: {// 最小化minimizer: [// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）`...`,new CssMinimizerPlugin(),],}
};

8. Webpack-打包 less 代码

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

  2. 步骤：

新建 login/index.less 文件，设置背景图样式（图片在配套资料-素材文件夹中）

html {body {background: url('./assets/login-bg.png') no-repeat center/cover;}
}

less 样式引入到 src/login/index.js 中

/*** 目标8：打包 less 代码*  8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中*  8.2 下载 less 和 less-loader 本地软件包*  8.3 配置 webpack.config.js 让 Webpack 拥有功能*  8.4 打包后观察效果*/
// 8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
import './index.less'

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

npm i less less-loader --save-dev

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

// ...module.exports = {// ...module: {rules: [// ...{test: /\.less$/i,use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]}]}
}

9. Webpack-打包图片

  1. 资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader

  2. 步骤：

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

    占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

    占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

    占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

  2. 注意：判断临界值默认为 8KB

    大于 8KB 文件：发送一个单独的文件并导出 URL 地址

    小于 8KB 文件：导出一个 data URI（base64字符串）

  3. 在 src/login/index.js 中给 img 标签添加 logo 图片

/*** 目标9：打包资源模块（图片处理）*  9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js*  9.2 打包后观察效果和区别*/
// 9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
// 注意：js 中引入本地图片资源要用 import 方式（如果是网络图片http地址，字符串可以直接写）
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

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

// ...module.exports = {// ...module: {rules: [// ...{test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset',generator: {filename: 'assets/[hash][ext][query]'}}]}
}

10.Webpack 搭建开发环境

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

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

  3. 步骤:

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

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

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

// ...module.exports = {// ...mode: 'development'
}
"scripts": {// ..."dev": "webpack serve --mode=development"
},

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

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

11. Webpack 打包模式

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

  2. 分类：

模式名称模式名字特点场景
开发模式development调试代码，实时加载，模块热替换等本地开发
开发模式production压缩代码，资源优化，更轻量等打包上线

如何设置影响 Webpack呢？

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

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

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

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

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

  2. 体验：在 build 命令后 修改 mode 的值，打包输出观察打包后的 js 文件内容

12.Webpack 打包模式的应用

  1. 需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

  2. 方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

    方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

    方案3：配置不同的 webpack.config.js （适用多种模式差异性较大情况）

  3. 主要使用方案 2 尝试，其他方案可以结合点击跳转的官方文档查看尝试

  4. 步骤：

下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

在 webpack.config.js 区分不同环境使用不同配置

module: {rules: [{test: /\.css$/i,// use: ['style-loader', "css-loader"],use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]},{test: /\.less$/i,use: [// compiles Less to CSSprocess.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,'css-loader','less-loader',],}],},

重新打包观察两种配置区别

13.Webpack 前端注入环境变量

  1. 需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

  2. 问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV

  3. 解决：使用 Webpack 内置的 DefinePlugin 插件

  4. 作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

  5. 配置 webpack.config.js 中给前端注入环境变量

// ...
const webpack = require('webpack')module.exports = {// ...plugins: [// ...new webpack.DefinePlugin({// key 是注入到打包后的前端 JS 代码中作为全局变量// value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)})]
}

14.Webpack 开发环境调错 source map

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

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

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

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

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

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

15.Webpack 设置解析别名路径

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

  2. 例如：

原来路径如下：

import { checkPhone, checkCode } from '../src/utils/check.js'

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

// ...const config = {// ...resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
}

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

import { checkPhone, checkCode } from '@/utils/check.js'

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

16.Webpack 多页面打包

  1. 概念：单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示，后续 Vue/React 会学到

    多页面：多个 html 文件，切换页面实现不同业务逻辑展示

  1. 需求：把黑马头条-数据管理平台-内容页面一起引入打包使用

  2. 步骤：

    1. 准备源码（html，css，js）放入相应位置，并改用模块化语法导出

    2. 下载 form-serialize 包并导入到核心代码中使用

    3. 配置 webpack.config.js 多入口和多页面的设置

      // ...
const config = {entry: {'模块名1': path.resolve(__dirname, 'src/入口1.js'),'模块名2': path.resolve(__dirname, 'src/入口2.js'),},output: {path: path.resolve(__dirname, 'dist'),filename: './[name]/index.js'  }plugins: [new HtmlWebpackPlugin({template: './public/页面2.html', // 模板文件filename: './路径/index.html', // 输出文件chunks: ['模块名2']})new HtmlWebpackPlugin({template: './public/页面2.html', // 模板文件filename: './路径/index.html', // 输出文件chunks: ['模块名2']})]
}

总结：

1.本文讲了什么是webpack

2.webpack的使用

3.webpack关于打包的相关知识

4.webpack关于环境的配置

❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/377931.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PostgreSQL安装/卸载（CentOS、Windows）

PostgreSQL安装/卸载（CentOS、Windows）

说明：PostgreSQL与MySQL一样，是一款开源免费的数据库技术，官方口号：The World’s Most Advanced Open Source Relational Database.（世界上最先进的开源关系数据库），本文介绍如何在Windows、Cen…
阅读更多...
一款好用的特殊字符处理工具

一款好用的特殊字符处理工具

跟mybatis代码的时候，偶然发现的一款特殊字符处理工具java.lang.StringTokenizer。平常，我们看到的mybatis mapper.xml里面各种换行各种缩进，但日志文件里面的sql都是整整齐齐的。没有换行符，缩进等。就是利用该工具做的格式化处理…
阅读更多...
Java设计模式的7个设计原则

Java设计模式的7个设计原则

Java设计模式的7个设计原则是面向对象设计领域中的重要指导方针，它们旨在提高软件系统的可维护性、可扩展性、可复用性和灵活性。以下是这7个设计原则的详细解释： 1. 开闭原则（Open-Closed Principle, OCP） 定义：一个…
阅读更多...
git常用命令及git分支

git常用命令及git分支

git常用命令及git分支 git常用命令设置用户签名初始化本地库查看本地库状态将文件添加到暂存区提交到本地库查看历史记录版本穿梭 git分支什么是分支分支的好处分支的操作查看分支创建分支切换分支删除分支合并分支合并冲突 git常用命令 设置用户签名 //设置用户签名 git con…
阅读更多...
axios 下载大文件时，展示下载进度的组件封装——js技能提升

axios 下载大文件时，展示下载进度的组件封装——js技能提升

之前面试的时候，有遇到一个问题：就是下载大文件的时候，如何得知下载进度，当时的回复是没有处理过。。。 现在想到了。axios中本身就有一个下载进度的方法，可以直接拿来使用。 下面记录一下处理步骤： 参考…
阅读更多...
超市管理系统 需求分析与设计 UML 方向

超市管理系统 需求分析与设计 UML 方向

一、项目介绍 1.1项目背景 随着经济一体化和电子商务的迅速发展，网络传播信息的速度打破了传统信息传递的模式，互联网的高速发展和计算机应用在各个高校进展迅速，更多信息化产品的突飞猛进，让现代的管理模式也发生了巨大的变化&…
阅读更多...
技术成神之路：设计模式（七）状态模式

技术成神之路：设计模式（七）状态模式

1.介绍 状态模式（State Pattern）是一种行为设计模式，它允许一个对象在其内部状态改变时改变其行为。这个模式将状态的相关行为封装在独立的状态类中，并将不同状态之间的转换逻辑分离开来。 2.主要作用 状态模式的主要作用是让一个…
阅读更多...
开始Linux之路

开始Linux之路

人生得一知己足矣，斯世当以同怀视之。——鲁迅 Linux操作系统简单操作指令 1、ls指令2、pwd命令3、cd指令4、mkdir指令(重要)5、whoami命令6、创建一个普通用户7、重新认识指令8、which指令9、alias命令10、touch指令11、rmdir指令 及 rm指令(重要)12、man指令(重要…
阅读更多...
数据结构进阶：使用链表实现栈和队列详解与示例（C, C#, C++）

数据结构进阶：使用链表实现栈和队列详解与示例（C, C#, C++）

文章目录 1、 栈与队列简介栈（Stack）队列（Queue） 2、使用链表实现栈C语言实现C#语言实现C语言实现 3、使用链表实现队列C语言实现C#语言实现C语言实现 4、链表实现栈和队列的性能分析时间复杂度空间复杂度性能特点与其他实现的比较…
阅读更多...
轻量级自适用商城卡密发卡源码（可运营）

轻量级自适用商城卡密发卡源码（可运营）

一款全开源非常好看的发卡源码。轻量级自适应个人自助发卡简介，这是一款二次开发的发卡平台源码修复原版bug,删除无用的代码。所有文件全部解密，只保留后台版权信息内容。大家放心使用，可以用于商业运营。轻量级自适应个人自助发卡。 源码下…
阅读更多...
WSL-Ubuntu20.04训练环境配置

WSL-Ubuntu20.04训练环境配置

1.YOLOv8训练环境配置 训练环境配置的话就仍然以YOLOv8为例，来说明如何配置深度学习训练环境。这部分内容比较简单，主要是安装miniAnaconda以及安装torch和torchvision. 首先是miniAnaconda的安装(参考官网的教程Miniconda — Anaconda )，执行…
阅读更多...
车载视频监控管理方案：无人驾驶出租车安全出行的保障

车载视频监控管理方案：无人驾驶出租车安全出行的保障

近日，无人驾驶出租车“萝卜快跑”在武汉开放载人测试成为热门话题。随着科技的飞速发展，无人驾驶技术已逐渐从概念走向现实，特别是在出租车行业中，无人驾驶出租车的推出将为公众提供更为安全、便捷、高效的出行服务。 视频监控技…
阅读更多...
【Diffusion学习】【生成式AI】Stable Diffusion、DALL-E、Imagen 背後共同的套路

【Diffusion学习】【生成式AI】Stable Diffusion、DALL-E、Imagen 背後共同的套路

文章目录 图片生成Framework 需要3个组件：相关论文【Stable Diffusion，DALL-E，Imagen】 具体介绍三个组件1. Text encoder介绍【结论：文字的encoder重要，Diffusion的模型不是很重要！】评估指标：…
阅读更多...
如何保证数据库和redis的数据一致性

如何保证数据库和redis的数据一致性

1、简介 在客户端请求数据时，如果能在缓存中命中数据，那就查询缓存，不用在去查询数据库，从而减轻数据库的压力，提高服务器的性能。 2、问题如何保证两者的一致性 先更新数据库在删除缓存 难点：如何保证…
阅读更多...
极狐Gitlab使用（1）

极狐Gitlab使用（1）

目录 续接上篇：极狐Gitlab安装部署-CSDN博客 1. 关闭注册功能 2. 创建群组 3. 创建用户 5. 邀请成员到群组 6. 设置导入导出项目源 7. 通过gitee导入库 8. 通过仓库URL导入 9. 自创建项目 10. 默认分支main的权限 11. 使用普通用户进入自建库 12. 创建用…
阅读更多...
为企业提升销售工作效率的工作手机管理系统

为企业提升销售工作效率的工作手机管理系统

在竞争日益激烈的市场环境中，企业的销售团队如同前线战士，其作战效率直接关乎企业的生存与发展。然而，传统销售管理模式下的信息孤岛、沟通不畅、数据混乱等问题，正悄然成为制约销售效率提升的瓶颈。今天，我们为您揭秘…
阅读更多...
axios以post方式提交表单形式数据

axios以post方式提交表单形式数据

某些后端框架请求接口必须走form表单提交的那种形式&#xff0c;但前端很少有<form action"接口地址" method"post"></form>这种写法去提交表单数据&#xff0c;所以前端需要用axios模拟一个表单提交接口。 Content-Type 代表发送端&#xff0…
阅读更多...
【C++PythonJava】字符处理详细解读_字符_ASCLL码_字母数字转换_算法竞赛_开发语言

【C++PythonJava】字符处理详细解读_字符_ASCLL码_字母数字转换_算法竞赛_开发语言

文章目录 Beginning1&#xff09;ASCLL 码2&#xff09;大小比较2&#xff09;判断数字字符3&#xff09;字符、数字间的相互转换End Beginning 在 C 中&#xff0c;字符和整数有着密不可分的关系。原因就是在计算机中&#xff0c;字符是以一种较 ASCLL 码的整数存储的。自然&…
阅读更多...
抖音短视频矩阵策略揭秘：引爆流量秘籍

抖音短视频矩阵策略揭秘：引爆流量秘籍

在当前的数字化媒体环境中&#xff0c;抖音已经成为全球最受欢迎的短视频平台之一&#xff0c;每日吸引了亿计的用户浏览各类视频内容。因此&#xff0c;对于众多企业与营销专家而言&#xff0c;掌握在抖音平台上实施高效的搜索引擎优化&#xff08;SEO&#xff09;策略和构建有…
阅读更多...
SpringBoot之健康监控（Actuator）

SpringBoot之健康监控（Actuator）

1&#xff0c;基本介绍 Spring Actuator 是 Spring Boot 提供的一个扩展模块&#xff0c;用于监控和管理应用程序的生产环境。它通过 HTTP 端点暴露了大量的监控和管理功能&#xff0c;使得开发者可以在运行时查看应用程序的运行状况、配置信息、性能指标等。 主要功能&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023