前端开发技术栈（工具篇）：2023深入了解webpack的安装和使用以及核心概念和启动流程（详细） 63.3k stars

目录

Webpack简介

Entry

Module

Chunk

Loader

Plugin

Output

Webpack的启动流程

Webpack的优缺点

Webpack的使用

1. 安装Webpack

2. 创建Webpack配置文件

3. 编写代码

4. 运行Webpack

5. 在HTML中引入打包后的文件

6. 执行编译命令

Webpack其他功能介绍

1. 使用配置文件

2. 使用插件

3. 使用loader

总结

图片

在前面一篇文章《前端开发技术栈（工具篇）：2023深入了解快速开发工具vite的安装和使用（详细）》中，我们详细介绍了vite这款工具的使用，并构建一个项目，通过编写了一个简单的示例来演示它的热更新功能。由于最早的项目可能使用的都还是webpack，所以本篇我将给大家总结介绍下webpack这款项目的打包工具。

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

图片

本文原文：前端开发技术栈（工具篇）：2023深入了解webpack的安装和使用以及核心概念和启动流程（详细） 63.3k stars

Webpack是一个强大的模块打包工具，它可以将多个模块打包成一个bundle文件，可以将各种资源（如JavaScript、CSS、图片等）打包成一个或多个静态资源文件，使得前端开发更加高效，从而实现代码的模块化、打包、压缩等功能。在本篇博客中，在使用Webpack时，了解它的启动流程以及它的优缺点是非常重要的，所以本篇我们将介绍Webpack核心概念的含义和作用、启动流程、优缺点以及在项目中的使用方法。 

图片

在Webpack中，Entry指定了构建的入口文件，Module表示一个模块，Chunk代表被分割的代码块，Loader用于处理各种类型的文件，Plugin扩展和定制Webpack的构建过程，Output指定构建后文件的输出路径和文件名。这些概念和功能共同构成了Webpack的核心，帮助开发者高效地构建前端项目。

Webpack简介

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

图片

 Webpack核心概念

接下来我们来介绍下Webpack主要的6个核心概念，在使用Webpack时，有6个核心概念是非常重要的，它们分别是入口（Entry）、出口（Output）、加载器（Loader）、插件（Plugin）、模式（Mode）和代码分割（Code Splitting）。了解和掌握这些概念对于使用Webpack进行项目构建是非常重要的。通过合理地配置入口、出口、加载器、插件、模式和代码分割，我们可以高效地打包和管理项目中的各种资源，提高开发效率和代码质量。

1. 入口（Entry）：入口是Webpack开始构建依赖图的起点，可抽象成输入。它指定了Webpack应该从哪个文件开始查找依赖关系，并从该文件开始构建整个应用程序的依赖图。一个入口可以对应一个或多个输出文件。

2. 出口（Output）：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果，出口指定了Webpack打包后的文件输出的位置和文件名。它定义了打包后的文件应该存放在哪个目录下，以及输出文件的命名规则。通常情况下，一个Webpack配置文件只能有一个出口。

3. 加载器/模块转换器（Loader）：加载器用于把模块原内容按照需求转换成新内容，对非JavaScript文件进行转换和处理。Webpack默认只能处理JavaScript文件，而通过加载器，我们可以告诉Webpack如何处理其他类型的文件，例如将CSS文件转换为JavaScript模块，或者将图片文件转换为Base64编码的字符串。

4. 插件（Plugin）：插件是Webpack的核心功能扩展机制，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。它们可以用于执行各种任务，例如压缩代码、提取CSS、生成HTML文件等。插件可以通过配置文件或者命令行参数进行配置，并且可以在整个构建过程中的不同阶段进行操作。

5. 模块（Module）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

6. 代码块（Chunk）：一个 Chunk 由多个模块组合而成的抽象概念，用于代码合并与分割。代码分割（Code Splitting）是指将应用程序的代码分割成多个块，以便于按需加载。这样可以减小初始加载的文件大小，并且在需要时动态加载额外的代码块。Webpack提供了多种代码分割的方式，例如通过动态导入（dynamic import）语法、使用`SplitChunksPlugin`插件等。

Entry

在Webpack中，Entry是指定构建的入口文件的配置项。入口文件是Webpack开始构建依赖图的起点，它可以是一个或多个JavaScript文件。通过指定Entry，Webpack可以找到入口文件，并从入口文件开始递归地解析模块依赖关系。

Entry的作用是告诉Webpack从哪里开始构建依赖图，并确定构建的入口模块。它可以是一个字符串，表示单个入口文件的路径，也可以是一个对象，表示多个入口文件的路径。

Entry支持一个入口，也可以支持多个入口，更可以支持由函数动态写入。Webpack 在寻找相对路径的文件时会以 context 为根目录，context 默认为执行启动 Webpack 时所在的当前工作目录。 如果想改变 context 的默认配置，则可以在配置文件里设置它。

Module

Module是Webpack中的一个核心概念，它代表着一个模块。模块可以是一个JavaScript文件，也可以是一个CSS文件、图片文件等其他类型的文件。

通过rules 配置模块的读取和解析规则，通常用来配置Loader。其类型是一个数组，数组里每一项都描述了如何去处理部分文件。配置一项rules 时大致通过以下方式：

1、条件匹配：通过test、include、exclude三个配置项来命中Loader要应用规则的文件。

2、应用规则：对选中后的文件通过use配置项来应用Loader，可以只应用一个Loader或者按照从后往前的顺序应用一组Loader，同时还可以分别给Loader传入参数。

在Webpack中，模块可以通过加载器（Loader）进行转换和处理。加载器可以将各种类型的文件转换为JavaScript模块，以便在浏览器中执行。例如，使用babel-loader可以将ES6代码转换为ES5代码，使用css-loader可以加载和处理CSS文件。

Module的作用是将项目中的各种资源文件转换为可执行的JavaScript代码，并将它们组织成一个依赖关系树。

Chunk

Chunk是Webpack中的一个概念，它代表着被分割出来的代码块。在Webpack的构建过程中，可以将代码拆分成多个块（Chunk），每个块包含一组相关的模块。

通过代码分割，可以实现按需加载，提高页面的加载速度和用户体验。例如，可以将第三方库和业务代码分割成不同的块，使得第三方库可以被缓存，减少重复加载的时间。

Loader

Loader是Webpack中的一个功能模块，用于处理各种类型的文件。通过加载器，Webpack可以将非JavaScript文件转换为JavaScript模块。

Loader可以看作具有文件转换功能的转义员，配置里的module.rules 数组配置了一组规则，告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。如配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。

Loader的作用是在模块加载的过程中对文件进行转换和处理。例如，可以使用babel-loader将ES6代码转换为ES5代码，使用css-loader加载和处理CSS文件，使用file-loader加载和处理图片文件。

Webpack支持链式调用多个加载器，通过加载器的配置可以对文件进行一系列的转换和处理操作。

Plugin

Plugin是Webpack中的一个功能模块，用于扩展和定制Webpack的构建过程。通过插件，在构建流程里注入钩子，可以实现各种功能需求，例如代码压缩、文件合并、文件分割、自动生成HTML文件等。它给 Webpack 带来了很大的灵活性。

使用 Plugin 的难点在于掌握Plugin 本身提供的配置项，而不是如何在 Webpack 中接入 Plugin。几乎所有 Webpack 无法直接实现的功能都能在社区找到开源的 Plugin 去解决，你需要善于使用搜索引擎去寻找解决问题的方法。Webpack有一个庞大的插件生态系统，开发者可以根据自己的需求选择合适的插件，或者自己开发插件来扩展Webpack的功能。

Plugin的作用是在Webpack的构建过程中执行一些额外的操作。插件可以通过在Webpack配置中实例化，并传入一些配置参数来使用。

Output

Output是Webpack中的一个配置项，配置如何输出最终想要的代码，用于指定构建后文件的输出路径和文件名。通过Output，可以将构建后的文件输出到指定的目录中。

Output 是一个 object，里面包含一系列配置项。例如：

  • output.filename：配置输出文件的名称，为string 类型。

  • Path：output.path 配置输出文件存放在本地的目录，必须是 string 类型的绝对路径。

  • publicPath：在复杂的项目里可能会有一些构建出的资源需要异步加载，加载这些异步资源需要对应的 URL 地址。

Output的作用是告诉Webpack构建后的文件应该输出到哪个目录，并指定输出文件的名称和格式。可以使用占位符来生成文件名，例如使用[hash]来生成带有哈希值的文件名，以便在文件内容变化时，可以通过改变文件名来实现缓存更新。

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

图片

Webpack的启动流程

Webpack的启动流程可以分为以下几个步骤：

1. 解析配置文件：Webpack启动后，首先会读取并解析项目中的配置文件，通常是一个名为`webpack.config.js`的文件。在配置文件中，我们可以指定入口、出口、加载器、插件等各种配置项。

2. 解析入口文件：Webpack会根据配置文件中指定的入口文件路径，找到入口文件。入口文件是Webpack开始构建依赖图的起点，它会引入其他模块，形成一个依赖关系树。

3. 解析模块依赖：Webpack会递归地解析入口文件引入的模块，并找到它们的依赖关系。Webpack支持多种模块化规范，如CommonJS、AMD、ES6模块等。也就是从Entry里配置的Module开始递归解析Entry依赖的所有Module，每找到一个Module，就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前Module依赖的Module；

4. 加载器转换：当Webpack遇到非JavaScript文件时，它会根据配置中的加载器进行转换。加载器可以将各种类型的文件转换为JavaScript模块，以便在浏览器中执行。

5. 代码打包：Webpack会将所有模块打包成一个或多个静态资源文件。在打包过程中，Webpack会根据配置中的规则对代码进行优化，例如代码压缩、文件合并、文件分割等。这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk；

6. 输出文件：最后，Webpack将打包后的文件输出到指定的目录中，也就是把所有Chunk转换成文件输出。输出的文件可以是JavaScript文件、CSS文件、图片文件等，具体的输出路径和文件名可以在配置文件中指定。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。

大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911

Vue专栏

https://blog.csdn.net/zhouruifu2015/category_6295339

Webpack的优缺点

Webpack作为一个功能强大的前端构建工具，具有以下优点：

1. 模块化支持：Webpack支持多种模块化规范，可以将代码拆分成多个模块，提高代码的可维护性和复用性。

2. 丰富的插件生态系统：Webpack有一个庞大的插件生态系统，可以通过插件来扩展和定制构建过程，实现各种功能需求。通过 Plugin 扩展，完整好用又不失灵活。

3. 代码分割和按需加载：Webpack支持代码分割，可以将应用程序的代码拆分成多个块，实现按需加载，提高页面加载速度和用户体验。

4. 开发者友好的调试工具：Webpack提供了强大的调试工具，可以帮助开发者定位和解决代码中的问题，提高开发效率。

5. 使用场景不仅限于 Web 开发。

6. 社区庞大活跃。

然而，Webpack也存在一些缺点：

1. 学习曲线较陡：Webpack的配置相对复杂，对于初学者来说，需要花费一定的时间来学习和理解其工作原理和配置方式。

2. 构建速度较慢：由于Webpack需要处理大量的模块和资源文件，所以在项目较大时，构建速度可能会比较慢。

3. 配置复杂：Webpack的配置文件中有许多选项和配置项，需要开发者具备一定的配置能力和经验。

大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

图片

Webpack的使用

1. 安装Webpack

首先，在开始使用Webpack之前，我们需要先安装Webpack。可以使用npm命令安装Webpack，命令如下：

npm install webpack --save-dev

安装完成后，可以使用以下命令查看Webpack版本：

webpack -v

或者使用如下命令进行全局安装均可

npm install -g webpack webpack-cli

或

npm install -g webpack

npm install -g webpack-cli

2. 创建Webpack配置文件

Webpack需要一个配置文件来告诉它如何进行打包。我们可以在项目根目录下创建一个名为webpack.config.js的文件，并在其中配置Webpack。

javascript

const path = require('path');  //Node.js内置模块
module.exports = {  entry: './src/index.js',  //配置入口文件或main.js  output: {filename: 'bundle.js',   //输出文件//输出路径，__dirname：当前文件所在路径    path: path.resolve(__dirname, 'dist')  }};

在这个配置文件中，读取当前项目目录下src文件夹中的index.js（入口文件或main.js）内容，分析资源依赖，把相关的js文件打包。我们指定了入口文件和输出文件的路径。入口文件是src/index.js，输出文件是dist/bundle.js，即打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

3. 编写代码

现在我们可以编写代码了。在src/index.js中，我们可以编写我们的应用代码。

javascript

function hello() {

    console.log('Hello, World!');

}

hello();

这段代码简单地打印了一个"Hello, World!"的消息。

4. 运行Webpack

现在我们可以使用Webpack进行打包了。在命令行中运行以下命令：

npx webpack

Webpack会读取我们的配置文件，并将我们的代码打包成一个名为bundle.js的文件，输出到dist目录下。

5. 在HTML中引入打包后的文件

最后，我们需要在HTML中引入打包后的文件。在index.html中，我们可以添加以下代码：

html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>Webpack Tutorial</title>  </head>  <body>    <script src="dist/bundle.js"></script>  </body></html>

这样，我们的应用就可以在浏览器中运行了。

6. 执行编译命令

webpack --mode=development

#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包

也可以配置项目的npm运行命令，修改package.json文件

"scripts": {    //...,    "dev": "webpack --mode=development",    "prod": "webpack --mode=production"}

运行npm命令执行打包与启动项目

npm run dev #开发打包

或

npm run prod #生产打包

图片

Webpack其他功能介绍

Webpack的使用非常简单，只需要在命令行中输入webpack命令即可。例如，如果要将一个index.js文件打包成bundle.js文件，可以使用以下命令：

webpack index.js bundle.js

Webpack会自动查找index.js文件所依赖的其他模块，并将它们打包成一个bundle.js文件。打包完成后，可以在HTML文件中引用该文件，例如：

<script src="bundle.js"></script>

Webpack还有许多其他功能，例如：

1. 使用配置文件

Webpack可以使用配置文件来配置打包的细节。可以创建一个webpack.config.js文件来配置Webpack，例如：

module.exports = {

entry: './index.js',

output: {

filename: 'bundle.js'

}

};

在命令行中输入webpack命令时，Webpack会自动读取webpack.config.js文件中的配置信息。

2. 使用插件

Webpack可以使用插件来扩展其功能。可以使用npm命令安装插件，然后在webpack.config.js文件中配置插件，例如：

const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = {    entry: './index.js',    output: {        filename: 'bundle.js'    },    plugins: [        new UglifyJSPlugin()    ]};

该配置会使用UglifyJSPlugin插件来压缩打包后的代码。

3. 使用loader

Webpack可以使用loader来处理各种类型的文件，例如CSS、图片等。可以使用npm命令安装loader，然后在webpack.config.js文件中配置loader，例如：

module.exports = {    entry: './index.js',    output: {        filename: 'bundle.js'    },    module: {        rules: [            {                test: /\.css$/,                use: ['style-loader', 'css-loader']            }        ]    }};

该配置会使用style-loader和css-loader来处理CSS文件。

以上就是Webpack的基本用法。当然，Webpack还有很多高级功能，例如使用插件来优化打包结果等等。如果您想深入了解可以参考官方文档介绍，或者关注公众号CTO Plus后续的文章。

图片

总结

Webpack是一个非常强大的模块打包工具，可以帮助我们实现代码的模块化、打包、压缩等功能。在使用Webpack时，可以使用命令行、配置文件、插件、loader等方式来实现不同的功能。希望本篇博客能够帮助大家更好地了解和使用Webpack。

参考资料

Github地址：https://github.com/webpack/webpack

服务配置：https://webpack.docschina.org/configuration/dev-server/

开发指南：https://webpack.docschina.org/guides/development/

大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911.html

 更多精彩，关注我公号，一起学习、成长

图片

 

Vue推荐阅读：

  • Vue3进阶：弄清Vue2 和 Vue3的一些区别以及Vue.js和Node.js之间的关系

  • Vue进阶：Vue特点和优点介绍，以及开发环境搭建和构建Vue3.0项目的几种方法

推荐阅读：

  • 前端开发技术栈（工具篇）：2023最新版nvm的Win/Linux安装和使用（详细） 27.8k stars

  • 前端开发技术栈（模板篇）：10款较流行的前端后台管理系统模板

  • 50+款前端高效开发辅助工具总结

  • 开源项目 | Vue进阶：总结下日常开发中关于Vue的热门开源项目

  • 最热门的用于后台管理类产品开发的开源前端框架vue-element-admin-4.4.0的介绍和使用

工具类推荐阅读：

  • 《前端开发技术栈（工具篇）：2023最新版nvm的Win/Linux安装和使用（详细）》

  • 《前端开发技术栈（工具篇）：2023深入了解快速开发工具vite的安装和使用（详细）》

  • 《前端开发技术栈（工具篇）：2023深入了解webpack的安装和使用以及核心概念和启动流程（详细）》

  • 《前端开发技术栈（工具篇）：详细介绍npm、pnpm和cnpm分别是什么，使用方法以及之间有哪些关系》

  • 《前端开发技术栈（工具篇）：Vue/Node.js项目构建和包管理器npm的使用以及命令详解》

  • 《前端开发技术栈（工具篇）：Vite在项目中的一些实践以及vite和webpack的区别，为什么选择Vite》

  • 《Vite实战案例：构建快速、高效的现代前端项目》

  • 《Vue进阶：得心应手的开发体验-基于Pycharm的Vue3项目构建与开发环境搭建》

 

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

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

相关文章

京东平台数据分析：2023年9月京东空气净化器行业品牌销售排行榜

京东平台数据分析：2023年9月京东空气净化器行业品牌销售排行榜

鲸参谋监测的京东平台9月份空气净化器市场销售数据已出炉&#xff01; 9月份&#xff0c;空气净化器的销售同比上年增长。根据鲸参谋平台的数据显示&#xff0c;今年9月&#xff0c;京东平台空气净化器的销量将近15万&#xff0c;同比增长约1%&#xff1b;销售额将近2亿元&…
阅读更多...
C#，数值计算——分类与推理，基座向量机（SVM，Support Vector Machines）的计算方法与源程序

C#，数值计算——分类与推理，基座向量机（SVM，Support Vector Machines）的计算方法与源程序

把 Support Vector Machines 翻译成 支持向量机 是书呆子翻译。基座向量机 不好吗。 1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// Support Vector Machines /// </summary> public class Svm { priv…
阅读更多...
bug：Chrome插件SwitchyOmega安装时程序包无效:“CRX_HEADER_INVALID“问题

bug：Chrome插件SwitchyOmega安装时程序包无效:“CRX_HEADER_INVALID“问题

bug&#xff1a;Chrome插件SwitchyOmega安装时程序包无效:“CRX_HEADER_INVALID“问题 1 解决 先说解决办法&#xff1a; 将下载的crx重命名为xxx.zip&#xff0c;然后解压打开chrome的开发者模式 点击加载已解压的应用程序&#xff0c;然后选择我们解压后的文件夹即可 安装成…
阅读更多...
Android APK瘦身实践：二次瘦身如何再减少大小？（4M—2.9M）

Android APK瘦身实践：二次瘦身如何再减少大小？（4M—2.9M）

瘦身前 因为平时就考虑到大小的限制&#xff0c;所以很多工作已经做过了&#xff0c;如下列举现在的状态&#xff1a; 7.3M&#xff08;Debug版本&#xff09;和6.5M&#xff08;Release版本&#xff09; 开启minifyEnabled 开启shrinkResources 已经去除不相关的大型库 图片和…
阅读更多...
k8s中kubectl陈述式资源管理

k8s中kubectl陈述式资源管理

1、 理论 1.1、 管理k8s核心资源的三种基本方法 &#xff1a; 1.1.1陈述式的资源管理方法&#xff1a; 主要依赖命令行工具kubectl进行管理 1.1.1.1、优点&#xff1a; 可以满足90%以上的使用场景 对资源的增、删、查操作比较容易 1.1.1.2、缺点&#xff1a; 命令冗长&…
阅读更多...
贝锐花生壳内网穿透推出全新功能，远程业务连接更安全

贝锐花生壳内网穿透推出全新功能，远程业务连接更安全

贝锐旗下内网穿透兼动态域名解析品牌花生壳目前推出了全新的“访问控制”功能&#xff0c;可精确设置访问权限&#xff0c;充分保障信息安全&#xff0c;满足更多用户安全远程访问内网服务的需求。 通过这一功能&#xff0c;可实现指定时间、IP、地区等条件下才能远程访问映射的…
阅读更多...
Qt中的单例模式

Qt中的单例模式

QT单例类管理信号和槽函数 Chapter1 Qt中的单例模式一、什么是单例模式&#xff1f;二、Qt中单例模式的实现2.1、静态成员变量2.2、静态局部变量2.3、Q_GLOBAL_STATIC 宏实例2 三、使用场景四、注意事项 Chapter2 QT单例类管理信号和槽函数一、创建单例类二、主界面添加组件三、…
阅读更多...
prometheus监控kafka

prometheus监控kafka

一、前言 关于对kafka的监控&#xff0c;要求高的话可以使用kafka-exorter和jmx-exporter一起收集监控数据&#xff0c;要求不高的情况下可以使用kafka-exporter收集监控数据即可 二、部署 kafka-exporter 部署kafka-exporter&#xff0c;我是在k8s集群中部署的 编辑yaml文件…
阅读更多...
Lua脚本语言

Lua脚本语言

1. 概念 Lua&#xff08;发音为"loo-ah"&#xff0c;葡萄牙语中的"lua"意为月亮&#xff09;是一种轻量级的、高效的、可嵌入的脚本编程语言。官网Lua最初由巴西计算机科学家Roberto Ierusalimschy、Waldemar Celes和Luiz Henrique de Figueiredo于1993年开…
阅读更多...
设计模式之门面模式

设计模式之门面模式

前言 什么是门面模式 门面模式是一种结构型设计模式&#xff0c;它提供了一个统一的接口&#xff0c;用来访问子系统中的一群接口。它定义了一个高层接口&#xff0c;让子系统更容易使用。这种模式常用于将一个复杂的子系统封装成一个简单的接口&#xff0c;使得客户端可以方…
阅读更多...
内网渗透——macOS上搭建Web服务器

内网渗透——macOS上搭建Web服务器

#　公网访问macOS本地web服务器【内网穿透】 文章目录 1. 启动Apache服务器2. 公网访问本地web服务2.1 本地安装配置cpolar2.2 创建隧道2.3 测试访问公网地址3. 配置固定二级子域名3.1 保留一个二级子域名3.2 配置二级子域名4. 测试访问公网固定二级子域名 以macOS自带的Apache…
阅读更多...
力扣第406题 根据身高重建队列 c++ 贪心思维

力扣第406题 根据身高重建队列 c++ 贪心思维

题目 406. 根据身高重建队列 中等 相关标签 贪心 树状数组 线段树 数组 排序 假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023