09_Webpack打包工具

1 初识Webpack

1.1 什么是Webpack

Webpack打包工具对项目中的复杂文件进行打包处理，可以实现项目的自动化构建，并且给前端开发人员带来了极大的便利。
目前，企业中的绝大多数前端项目是基于Webpack打包工具来进行开发的。
图片1.png

1.2 Webpack的安装与使用

使用npm包管理工具安装webpack和webpack-cli两个模块。
npm install webpack webpack-cli -D
目录下新建webpack.config.js文件

// 使用module.exports方式导出配置对象。
// mode用来指定构建模式
module.exports = {mode: 'development'
};

// package.json
// 设置dev为webpack
// 表示当我们使用npm run dev命令时
// 就可以执行script节点下dev选项的脚本来启动Webpack对项目进行打包处理。
"dev": "webpack"

在Webpack的4.x版本中，默认约定entry打包的入口文件为src下的index.js；output打包的输出文件为dist下的main.js。

1.3 手动配置入口和出口文件

配置Webpack默认入口和出口文件配置是通过手动设置webpack.config.js文件中的配置对象的entry和output属性来定义新的入口和出口文件。

// webpack.config.js
// 导入操作文件路径的模块
const path = require('path');
module.exports = {mode: 'development',// 打包入口文件的路径entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, './dist'),   // 输出文件的存放路径filename: 'bundle.js'                   // 输出文件的名称}
};

1.4 使用Webpack实现列表隔行换色效果

利用Webpack中jQuery插件来实现列表隔行换色的页面效果。

  • 安装jQuery插件
    • npm install jquery -S
  • 使用$.css()方法实现页面效果
  • 打包index.js
  • 新建index.html文件
  • 查看列表隔行换色效果
// index.js
// 使用ES6模块化语法导入jquery插件
import $ from 'jquery';
$(function() {$('li:odd').css('backgroundColor', 'lightgreen');$('li:even').css('backgroundColor', 'lightblue');
});

1.5 Webpack与Gulp对比

  • gulp是工具链、构建工具。可以配合各种插件做js压缩，css压缩，less编译等，可以替代手工实现自动化工作；而webpack是文件打包工具，可以把项目的各种js文件、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案。
  • 在定义和使用类比中两者都有各的用途，同时webpack为初级编译程序，gulp为高级编译程序，在功能上要比webpack应用程序中多。
  • webpack可以很方便使用node_module、es6或者样式注入等功能，作为最初级的功能定位性价比最高，webpack输入输出都以js为主，对html兼顾较少，可用组件不多很难达到可用的程度。gulp在编程方面较为复杂，但是可用的组件也会更多，手动编译的情况下耗时较长，同时此软件不适合初级入门者使用。
  • Gulp侧重于前端开发的整个过程的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。
  • Webpack，模块打包机 ，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。
    | | Gulp | Webpack |
    | — | — | — |
    | 定位 | 基于流的自动化构建工具 | 一个万能模块打包器 |
    | 目标 | 自动化和优化开发工作流，为通用 website 开发而生 | 通用模块打包加载器，为移动端大型 SPA 应用而生 |
    | 学习难度 | 易于学习，易于使用， api 总共只有 5 个方法 | 有大量新的概念和 api ，学习成本高 |
    | 适用场景 | 基于流的作业方式适合多页面应用开发 | 一切皆模块的特点适合单页面应用开发 |
    | 作业方式 | 对输入（ gulp.src ）的 js，ts，scss，less等源文件一次执行打包（bundle）、编译（complie）、压缩、重命名等处理后输出（gulp.dest）到指定目录中去，为了构建而打包 | 对入口文件（ entry ）递归解析生成依赖关系图，然后将所有依赖打包在一起，在打包之前会将所有依赖转译成可打包的 js 模块，为了打包而构建 |
    | 使用方式 | 常规 js 开发，编写一系列构建任务( task ) | 编辑各种 JSON 配置项优点 |
    | 优点 | 适合多页面开发，易于学习，易于使用，接口优雅 | 可以打包一切资源，适配各种模块系统 |
    | 缺点 | 单页面应用方面输出乏力，而且对流行的单页技术有些难以处理（比如 Vue 单文件组件，使用 gulp 处理就会很困难，而webpack 一个 Ioader 就能轻松搞定）
    | 不适合多页应用开发，灵活度高但同时配置很繁琐复杂。“打包一切”这个优点对于 HTTP/1.1 尤其重要，因为所有资源打包在一起能明显减少浏览器访问页面时的资源请求数量，从而减少应用程序必须等待的时间。但这个优点可能会随着 HTTP/2 的流行而变得不那么突出，因为 HTTP/2 的多路复用可以有效解决客户端并行请求时的瓶颈问题。 |
    | 结论 | 浏览器多页面应用（MPA）首选方案 | 浏览器单页面（SPA）首选方案 |

2 Webpack自动打包

2.1 配置webpack-dev-server

webpack-dev-server可以支持项目自动打包的工具，可以启动一个实时打包的HTTP服务器，使用webpack-dev-server来实现项目的自动打包功能。

  • 安装webpack-dev-server插件
    • npm install webpack-dev-server -D
  • 修改package.json中scripts选项中的dev命令
    • "dev": "webpack-dev-server"
  • 自动打包bundle.js
    • npm run dev
    • 在命令执行后，会自动生成bundle.js文件，它不会放到物理磁盘上，而是放到了内存中，是一个虚拟的看不见的bundle.js文件。
  • 在index.html文件中引入bundle.js
    • <script src="/bundle.js"></script>
    • 引入的根目录下的bundle.js，bundle.js文件可以通过localhost:8080/bundle.js可以访问到代码。
  • 查看页面效果

2.2 配置html-webpack-plugin

html-webpack-plugin插件用来生成预览的页面。

  • 安装html-webpack-plugin插件
    • npm install html-webpack-plugin -D
  • 实例化HtmlWebpackPlugin()
  • 配置html-webpack-plugin插件
  • 重新进行打包
  • 查看页面效果
// webpack.config.js
// 导入生成预览页面的插件，得到一个构造函数 
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({// 指定要用到的模板文件template: './src/index.html', // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示filename: 'index.html'
});

// plugins数组是webpack打包期间会用到的一些插件列表
module.exports = {// 原代码plugins: [ htmlPlugin ]
};

// package.json
// 修改scripts选项中的dev命令
// --open参数用来实现打包完成后自动打开浏览器页面功能
// --host参数用来配置IP地址127.0.0.1
// --port参数用来配置端口号3000。
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000"

3 Webpack中的加载器

3.1 css-loader和style-loader加载器

在默认的情况下，Webpack能打包处理一些以.js后缀名结尾的简单模块，而其他非.js后缀名结尾的复杂模块是不能打包处理的，需要通过调用特定的加载器来打包处理相应文件模块，否则会报错。
常用加载器：

  • css-loader加载器和style-loader加载器
  • sass-loader加载器
  • less-loader加载器
  • postcss-loader加载器
  • url-loader加载器
  • babel-loader加载器

在Webpack中，同时使用css-loader和style-loader加载器来打包处理CSS文件。

  • 新建index.css
    • 初始化li元素的默认样式
    • li {list-style: none;}
  • 引入index.css
    • 引入当前目录下的css目录中的index.css模块
    • 打开index.js文件，在该文件的头部区域添加代码
    • import './css/index.css';
    • 报错是因为没有安装处理CSS文件的相关loader加载器
  • 运行报错
    • 保存文件后，查看运行结果
  • 配置loader
    • 安装style-loader和css-loader加载器，并配置loader规则
    • npm install style-loader css-loader -D
  • 查看页面效果
    • 保存文件后，使用npm run dev命令重新启动服务器
    • 打开webpack.config.js文件，添加module属性
    • “/\.css$/”表示匹配文件名后缀为.css的文件；use表示调用对应的loader加载器。
module: {rules: [{test: /\.css$/, use: ['style-loader', 'css-loader']},]
}

3.2 sass-loader加载器

Sass（Syntactically Awesome Stylesheets）是一个成熟、稳定、功能强大的专业级CSS扩展语言。使用Sass语言以及Sass的样式库（如 Compass）有助于更好地组织管理样式文件，并更高效地开发项目。
在Webpack中，sass-loader加载器可以用来打包处理Sass文件。

  • 在css目录中，新建index.scss文件，编写Sass代码。
    • ul {font-size: 12px; li{line-height: 30px;}}
  • 安装处理.scss文件的sass-loader加载器和node-sass模块
    • npm install sass-loader node-sass -D
    • node-sass是sass-loader的内置依赖项，当使用sass-loader时必须同时安装node-sass模块。
  • 在rules数组列表中添加处理index.scss文件的loader规则
    • 打开webpack.config.js文件
    • {test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader']},
    • “/\.scss$/”表示匹配文件名后缀为.scss的文件；use中的sass-loader首先被调用处理匹配到的Sass文件，然后将返回结果依次向前传递，直到结束。
  • 打开index.js文件，在该文件的头部区域添加代码
    • import './css/index.scss';
    • 使用npm run dev命令重新启动服务器

3.3 less-loader加载器

Less（Leaner Style Sheets）是一门CSS扩展语言，也称为CSS预处理器。作为CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
在Webpack中可以使用less-loader加载器来打包处理Less文件。

  • 在css目录中，新建index.less文件，编写less代码。
    • body {margin: 0;padding: 0; ul {padding: 0;margin: 0;}}
  • 安装处理.less文件的less-loader加载器和less模块
    • npm install less-loader less -D
    • less模块是less-loader加载器的内置依赖项，当使用less-loader时必须同时安装less模块。
  • 在rules数组列表中添加处理index.less文件的loader规则
    • { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
    • “/\.less$/”表示匹配文件名后缀为.less的文件，less-loader加载器用来处理匹配到的.less文件
  • 打开index.js文件，在该文件的头部区域添加代码
    • import './css/index.less';
    • 使用npm run dev命令重新启动服务器

3.4 postcss-loader加载器

PostCSS是一个用JavaScript工具和插件转换CSS代码的工具，类似于Babel对JavaScript的处理。
PostCSS的功能如下：

  • 使用下一代CSS语法
  • 自动补全浏览器的前缀
  • 自动把px单位转换成rem
  • 压缩CSS代码

autoprefixer是一个后处理程序（插件），它经常与postcss-loader加载器一起配合使用，会自动为普通的CSS添加浏览器前缀，并且支持W3C最新的规范。

  • 定义input搜索框
    • <body><input type="text" placeholder="搜索"/></body>
    • 设置input输入框的placeholder属性的值为“搜索”
  • 定义占位文本的字体颜色为红色效果
    • ::placeholder{color: red;}
    • 伪元素::placeholder选择器用来选择一个表单元素的占位文本
  • 运行程序
    • Chome浏览器中的“搜索”字体颜色显示为红色
    • IE11浏览器中的“搜索”字体颜色显示为灰色
  • 安装postcss-loader加载器和autoprefixer插件
    • npm install postcss-loader autoprefixer -D
    • postcss-loader和autoprefixer可以自动添加CSS的浏览器兼容性前缀
  • 引入autoprefixer插件，配置插件autoprefixer插件
    • 新建postcss.config.js文件，编写JavaScript代码
    • 设置属性的值为数组列表，并在数组列表挂载一个autoprefixer插件
const autoprefixer = require('autoprefixer');  // 导入自动添加前缀的插件
module.exports = {plugins: [ autoprefixer ]  // 挂载插件
};
  • 修改处理index.css文件的loader规则
    • 打开webpack.config.js文件，编写代码
    • { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader']},
    • 在use数组的最后添加一个postcss-loader加载器用来自动为普通的CSS添加浏览器前缀
  • 使用npm run dev命令重新启动服务器

3.5 url-loader加载器

url-loader加载器用来打包处理CSS中与URL路径地址相关的图片和字体文件，并将图片和字体文件转换成为base64图片形式。

  • 定义背景图片
    • 定义id值为box的div元素
    • <body><div id="box"></div></body>
    • 设置id值为box的div元素的背景图片
    • #box{width: 580px;height: 340px;background: url('../images/1.jpg');}
  • 配置url-loader规则
    • 安装url-loader和file-loader加载器
    • npm install url-loader file-loader -D
    • url-loader和file-loader能处理图片和字体文件
    • 添加处理图片和字体文件的loader规则
    • 打开webpack.config.js文件，编写代码
    • {test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: 'url-loader?limit=16940'},
    • test的值表示匹配不同格式的图片和字体文件；“?”符号与参数项“limit=16940”连接。limit参数用来指定图片的大小，单位是字节（byte）。当图片小于16940时，才会被转为base64图片
  • 查看图片效果
    • 使用npm run dev命令重新启动服务器

3.6 babel-loader加载器

项目开发过程中，当编写JavaScript代码时，有时候会使用JavaScript高级语法，这些高级语法存在兼容性的问题。我们可以使用babel-loader加载器对JavaScript高级语法进行打包处理，如class语法。

  • 创建Person类
    • 使用class关键字创建Person类
    • class Person {static name = '张三'};console.log(Person.name);
    • 保存文件后，运行结果
    • 报错是因为没有安装处理JavaScript高级语法的babel-loader加载器和插件
  • 配置babel-loader规则
    • 安装babel-loader、 @babel/core等插件
    • npm install babel-loader @babel/core @babel/runtime -D
    • 安装处理JavaScript高级语法的插件
    • npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
      • @babel/preset-env 是一个智能预设，可让开发人员使用最新的JavaScript，而无须微观管理目标环境所需的语法转换。
      • @babel/plugin-transform-runtime 是Babel 转换器相关的插件。
      • @babel/plugin-proposal-class-properties 插件用于编译class。
    • 初始化babel基本配置，新建babel.config.js文件，编写JavaScript代码
    • 配置对象中的presets属性的值为数组列表，并在数组中添加安装后的@babel/preset-env智能预设
module.exports = {presets: [ '@babel/preset-env' ],plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
};
  • 添加处理JavaScript高级语法的loader规则
  • { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
  • “/\.js$/”表示匹配文件名后缀为.js的文件,设置exclude属性的值为“/node_modules/”，表示babel-loader加载器不需要处理node_modules中的JavaScript文件。
  • 查看控制台打印结果
    • 使用npm run dev命令重新启动服务器
    • index.html文件中已经手动引入过bundle.js

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

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

相关文章

C++学习——引用详解

C++学习——引用详解

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 一、引用的语法 1、引用的含义 引用&#xff08;Reference&#xff09;是 C 相对于C语言的又一个扩充。 引用可以看做是数据的一个别名&#xff0c;通过这个别名和原来的名字都能够…
阅读更多...
可观测 AIOps 的智能监控和诊断实践丨QCon 全球软件开发大会总结

可观测 AIOps 的智能监控和诊断实践丨QCon 全球软件开发大会总结

作者&#xff1a;董善东&#xff08;梵登&#xff09; 本文是作者于 9 月 5 日在 QCon 北京 2023&#xff08;全球软件开发大会&#xff09;上做的《阿里云可观测 AIOps 的智能监控和诊断实践》专题演讲文字版。 大家上午好&#xff0c;很高兴可以在 QCon 稳定性和可观测的场…
阅读更多...
华为云云耀云服务器L实例评测｜华为云耀云服务器L实例评测用例(五)

华为云云耀云服务器L实例评测｜华为云耀云服务器L实例评测用例(五)

六、华为云耀云服务器L实例评测用例&#xff1a; “兵马未动&#xff0c;粮草先行”&#xff0c;随着企业业务的快速发展&#xff0c;服务器在数字化建设体系至关重要&#xff0c;为了保证服务器的稳定性、可靠性&#xff0c;需要对服务器进行评测&#xff0c;以确保服务器能够…
阅读更多...
FPC柔性电路板介绍及PCB设计经验规则总结

FPC柔性电路板介绍及PCB设计经验规则总结

🏡《总目录》 目录 1，概述2，FPC的特点3，FPC设计十五条经验规则4，总结1，概述 FPC软板由于具有可弯曲折叠的特点，当前在消费电子，汽车电子和航空航天领域应用广泛。本文详细介绍FPC的特点并对FPC板设计中需要注意的经验原则进行总结。 2，FPC的特点 FPC的全称是Flexibl…
阅读更多...
网站如何应对网络流量攻击

网站如何应对网络流量攻击

网络安全问题中&#xff0c;受到流量攻击是一种常见挑战。以下是一系列的专业建议&#xff0c;帮助您预防和减轻这类攻击&#xff0c;从而确保您的网站和数据的安全。 使用 Web 应用程序防火墙 (WAF) Web 应用程序防火墙是一项专门的安全工具&#xff0c;能够检测和拦截恶意流…
阅读更多...
【Docker 内核详解】namespace 资源隔离（五）：User namespaces

【Docker 内核详解】namespace 资源隔离（五）：User namespaces

【Docker 内核详解 - namespace 资源隔离】系列包含&#xff1a; namespace 资源隔离&#xff08;一&#xff09;&#xff1a;进行 namespace API 操作的 4 种方式namespace 资源隔离&#xff08;二&#xff09;&#xff1a;UTS namespace & IPC namespacenamespace 资源隔…
阅读更多...
项目管理软件中注释功能的作用是什么？

项目管理软件中注释功能的作用是什么？

在项目管理软件中&#xff0c;注释功能允许您对任务、文件夹和项目进行详细的标注。这一功能不仅便于团队成员之间的沟通与协作&#xff0c;还能提高项目管理的效率。通过在项目中添加评论&#xff0c;您可以及时了解项目的最新动态&#xff0c;提出疑问并寻求解决方案。此外&a…
阅读更多...
汇编语言基础

汇编语言基础

引言 汇编语言是直接在硬件之上工作的编程语言&#xff0c;首先要了解硬件系统的结构&#xff0c;才能有效的应用汇编语言对其编程。汇编课程的研究重点放在如何利用硬件系统的编程结构和指令集有效灵活的控制系统进行工作。 基础知识 1.1机器语言 机器语言是机器指令的集合…
阅读更多...
单链表---结构体实现

单链表---结构体实现

定义 链表称为线性表的链式存储&#xff0c;顺序表逻辑上相邻的数据&#xff0c;存储位置也相邻。链表逻辑上相邻的数据&#xff0c;存储位置是随机分布在内存的各个位置上的。 故 对于每一个结点&#xff0c;定义的结构体是&#xff1a; typedef struct _LinkNode {int d…
阅读更多...
Java-使用sqlSessionTemplate实现批量更新-模拟mybatis 动态sql

Java-使用sqlSessionTemplate实现批量更新-模拟mybatis 动态sql

环境准备&#xff08;非核心方法&#xff09; 创建表 创建表的sql(下表是基于Oracle创建的) CREATE TABLE "SYSTEM"."STUDENT" ("ID" NUMBER(10, 0),"NAME" VARCHAR2(20 BYTE),"ADDRES" CLOB,PRIMARY KEY ( …
阅读更多...
milvus和相似度检索

milvus和相似度检索

流程 milvus的使用流程是 创建collection -> 创建partition -> 创建索引(如果需要检索) -> 插入数据 -> 检索 这里以Python为例, 使用的milvus版本为2.3.x 首先按照库&#xff0c; python3 -m pip install pymilvus Connect from pymilvus import connections c…
阅读更多...
mac电脑版数字图像处理软件：ACDSee Photo Studio 9最新 for Mac

mac电脑版数字图像处理软件：ACDSee Photo Studio 9最新 for Mac

ACDSee Photo Studio 9是一款由ACD Systems开发的功能强大的照片管理和编辑软件&#xff0c;专为Mac用户提供一站式解决方案&#xff0c;方便用户轻松浏览、管理和编辑照片。该软件提供了许多实用的工具和功能&#xff0c;包括高效的导入和排序工具、强大的编辑工具、智能组织和…
阅读更多...
微信小程序设置动态变量设值

微信小程序设置动态变量设值

微信小程序设置动态变量设值 微信小程序如何动态变量设值&#xff1f; 示例代码如下&#xff1a; setValFunc() {const key this.data.currentPickerid; // 业务需求动态键值key&#xff0c;或者是上一界面获取的动态key值const value 变量值;this.setData({[${key}]: valu…
阅读更多...
CustomTabBar 自定义选项卡视图

CustomTabBar 自定义选项卡视图

1. 用到的技术点 1) Generics 泛型 2) ViewBuilder 视图构造器 3) PreferenceKey 偏好设置 4) MatchedGeometryEffect 几何效果 2. 创建枚举选项卡项散列&#xff0c;TabBarItem.swift import Foundation import SwiftUI//struct TabBarItem: Hashable{ // let ico…
阅读更多...
AKKA.Net 的使用 来自CHATGPT

AKKA.Net 的使用 来自CHATGPT

请用C# 语言实现一个自动化设备 流水线调度模型&#xff0c;流水线各个环节需要并行执行&#xff1a; 下面是一个使用C#语言实现自动化设备流水线调度模型的简单示例。该示例使用并发编程库System.Threading.Tasks来实现流水线各个环节的并行执行。 csharp using System; usi…
阅读更多...
Android 13 骁龙相机点击录像流程分析

Android 13 骁龙相机点击录像流程分析

一.背景 由于最近客户定制需要将文件挂载类型修改为sdcardfs，由于修改了文件挂载类型，导致了骁龙相机录像后不显示左下角缩略图，也不能点击进入相册中，相册里面也没有录制的视频，故对骁龙相机从点击事件开始进行问题的排查 二.流程介绍 录像的流程大概分为几个阶段：进行…
阅读更多...
浏览器backspace无法回退到上一层解决办法

浏览器backspace无法回退到上一层解决办法

01.问题 浏览器backspace无法回退到上一层解决办法 02.解决 //浏览器回退 document.onkeydown function () {// 可以利用alert(event.keyCode)获取你想要回退的keyCodeif (event.keyCode 8) {history.go(-1);} }03.参考资料 浏览器页面的回退实现
阅读更多...
PDF-Word-图片等的互相转换

PDF-Word-图片等的互相转换

轻闪PDF客户端 - 功能强大的一站式PDF工具 | PDF编辑、转换、阅读 上面页面支持PDF转换成各类别&#xff1a;鼠标停留在PDF工具&#xff0c;点击转换类型即可在线转换 Word-PDF&#xff1a;word文档打开word文件中&#xff0c;点击文件->另存为->另存为的位置->保存…
阅读更多...
Oracle数据不常用的函数

Oracle数据不常用的函数

COALESCE函数 COALESCE 和 NVL 都是 Oracle 数据库中用于处理 NULL 值的函数&#xff0c;但它们在一些方面有区别&#xff1a; 1. **语法**&#xff1a; - COALESCE 的语法允许多个参数&#xff0c;它会从参数列表中选择第一个非 NULL 值。语法如下&#xff1a;COALESCE(e…
阅读更多...
Java练习题-获取数组元素最大值

Java练习题-获取数组元素最大值

✅作者简介&#xff1a;CSDN内容合伙人、阿里云专家博主、51CTO专家博主、新星计划第三季python赛道Top1&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;Java练习题 &#x1f4ac;个人格言&#xff1a;不断的翻越一座又…
阅读更多...
最新文章

Copyright @ 2022~2023