【前端知识】前端打包工具webpack深度解读

webpack+andesign搭建前端脚手架

    • webpack概述
      • 一、核心功能
      • 二、主要特点
      • 三、核心概念
      • 四、使用场景
      • 五、安装与配置
      • 六、常用命令
    • 配置文件详解
      • 一、基本结构
      • 二、主要配置项及其作用
      • 三、示例配置
    • 加载器
      • 一、加载器的定义与作用
      • 二、常见的加载器类型及作用
      • 三、加载器的配置与使用
      • 四、加载器的特点与优势
    • 插件
      • 一、插件的定义与作用
      • 二、插件的工作原理
      • 三、插件的使用方式
      • 四、编写自定义插件
      • 五、插件的优势与特点
    • 常见的插件有哪些
    • 完整示例
      • 例子背景
      • Webpack的作用演示
      • Webpack的作用总结
    • 参考文献

webpack概述

Webpack是一个功能强大的前端构建工具,也是一个开源的JavaScript模块打包工具。以下是对Webpack的详细介绍:

一、核心功能

Webpack的核心功能是解决模块之间的依赖关系,把各个模块按照特定的规则和顺序组织在一起,最终合并为一个或多个静态资源文件(如JS、CSS、图片等),以便在浏览器中加载和运行。这个过程被称为模块打包。
webpack

二、主要特点

  1. 支持多种模块化标准:Webpack默认支持多种模块标准,包括AMD、CommonJS以及最新的ES6模块,这使得它对于同时使用多种模块标准的工程非常有用。
  2. 代码分片:Webpack支持代码分片,可以分割打包后的资源,在首屏只加载必要的部分,将不太重要的功能放到后面动态加载。这对于资源体积较大的应用来说尤为重要,可以有效地减小资源体积,提升首页渲染速度。
  3. 处理多种资源:除了JavaScript以外,Webpack还可以处理样式、模板,甚至图片等,开发者只需导入这些资源,Webpack会通过相应的loader进行处理。
  4. 丰富的插件系统:Webpack提供了丰富的插件系统,开发者可以通过插件实现各种功能的扩展,如压缩代码、自动生成HTML文件等。
  5. 热模块替换:Webpack内置了热模块替换(Hot Module Replacement, HMR)功能,可以在开发过程中实时替换、添加或删除模块,而无需完全刷新页面。

三、核心概念

  1. Entry(入口):Webpack将从指定的入口文件开始分析和构建依赖关系树。入口可以是单个文件或多个文件,Webpack会根据入口配置找出所有的依赖模块。
  2. Output(输出):指定Webpack打包后的文件输出的路径和文件名。开发者可以通过配置output选项来指定输出文件的路径、名称和格式等。
  3. Loader(加载器):Webpack本身只能处理JavaScript模块,但通过Loader的使用,可以处理其他类型的文件(如CSS、LESS、图片等)。Loader的作用是在模块加载时对其进行转换和处理。
  4. Plugin(插件):插件用于扩展Webpack的功能。它可以在打包的不同阶段执行特定的任务。例如,可以使用插件来压缩代码、拆分代码、生成HTML文件等。

四、使用场景

Webpack特别适用于大型SPA(Single Page Application)或企业级Web应用,这类项目往往需要处理多种资源和复杂的构建流程。同时,Webpack也广泛应用于前端框架和库的开发中,如Vue、React、Angular等。

五、安装与配置

  1. 安装:Webpack可以通过npm进行安装。通常建议将Webpack作为项目依赖进行安装,而不是全局安装。
  2. 配置:Webpack的配置文件通常是webpack.config.js。在这个文件中,开发者可以指定入口文件、输出配置、加载器、插件等。

六、常用命令

Webpack提供了一系列常用命令,如:

  • webpack:根据webpack.config.js配置文件中的设置对项目进行打包构建。
  • webpack -p:对打包后的文件进行压缩。
  • webpack -d:生成Source Maps,方便调试。
  • webpack --watch:实时监控项目中的文件变化,并在文件修改后自动重新打包构建。

综上所述,Webpack是一个功能强大的前端构建工具,它能够帮助开发者高效地处理、打包和优化静态资源,提升Web应用的性能和用户体验。

配置文件详解

Webpack相关的内置文件主要是指其配置文件,即webpack.config.js。这个文件是Webpack构建流程的核心,它定义了如何打包和编译项目中的资源(如JavaScript、CSS、图片等)。以下是对webpack.config.js文件内容的详细解释:

一、基本结构

webpack.config.js文件是一个JavaScript文件,通过module.exports导出一个配置对象。这个对象包含了Webpack在构建过程中需要的所有配置信息。其基本结构如下:

module.exports = {// 配置项entry: './path/to/my/entry/file.js', // 入口文件output: { // 输出配置// 输出目录和文件名等配置},module: { // 模块配置// 定义一系列的加载器规则},plugins: [ // 插件配置// 定义一系列插件],// 其他配置项...
};

二、主要配置项及其作用

  1. entry(入口)

    • 配置项:entry
    • 作用:告诉Webpack从哪个文件开始打包,是构建依赖图的起点。
    • 配置方式:
      • 单入口:指定一个字符串作为入口文件路径。
      • 多入口(数组):当需要将多个模块打包成一个bundle时使用,指定一个包含多个文件路径的数组。
      • 多入口(对象):当需要生成多个bundle时使用,键为bundle名称,值为入口文件路径。
  2. output(出口)

    • 配置项:output
    • 作用:定义了Webpack如何将编译后的文件输出到磁盘上。
    • 主要属性:
      • path:输出目录的绝对路径。通常使用path.resolve方法生成绝对路径。
      • filename:输出文件的名称。可以使用占位符(如[name])来确保每个文件名称唯一。
  3. module(模块)

    • 配置项:module.rules
    • 作用:用于定义一系列的加载器规则,通过test属性匹配文件类型,通过use属性指定使用的加载器。
    • 规则配置:
      • test:用于匹配资源文件的正则表达式。
      • use:指定要使用的加载器数组。每个加载器可以是一个字符串(loader的简写形式)或一个对象(可以包含loader名称和其他选项)。
  4. plugins(插件)

    • 配置项:plugins
    • 作用:用于执行范围更广的任务,如打包优化、资源管理和环境变量注入等。
    • 配置方式:在plugins数组中定义一系列插件实例。通常需要先通过require引入插件,然后创建插件实例并添加到数组中。

三、示例配置

以下是一个简单的webpack.config.js示例配置:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {mode: 'development', // 打包模式,可以是'development'或'production'entry: './src/index.js', // 入口文件output: {path: path.resolve(__dirname, 'dist'), // 输出目录filename: 'bundle.js', // 输出文件名},module: {rules: [{test: /\.css$/, // 匹配CSS文件use: ['style-loader', 'css-loader'], // 使用style-loader和css-loader处理CSS文件},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片文件type: 'asset/resource', // 使用资源加载器处理图片文件},// 其他规则...],},plugins: [new HtmlWebpackPlugin({template: './src/index.html', // HTML模板文件filename: 'index.html', // 输出的HTML文件名}),// 其他插件...],// 其他配置项...
};

在这个示例配置中,我们指定了打包模式为development,入口文件为./src/index.js,输出目录为dist,输出文件名为bundle.js。同时,我们还配置了CSS文件和图片文件的处理规则,以及一个用于生成HTML文件的插件HtmlWebpackPlugin

总的来说,webpack.config.js文件是Webpack构建流程的核心配置文件,通过合理配置该文件,可以实现对项目资源的有效管理和优化。

加载器

Webpack加载器(Loader)是Webpack的核心概念之一,它允许开发者在打包过程中对不同类型的文件进行转换和处理。以下是对Webpack加载器的详细解释:

一、加载器的定义与作用

加载器可以理解为一个转换器,它将源文件作为输入,经过一系列的处理后,输出转换后的文件。Webpack加载器的主要作用是将非JavaScript文件转换为Webpack可识别的模块,以便在应用程序中使用。

二、常见的加载器类型及作用

  1. 编译加载器:用于将高级语言(如TypeScript、CoffeeScript)转换为JavaScript。常用的编译加载器有babel-loader、ts-loader等。

    • babel-loader:使用Babel将ES6+代码转换为向后兼容的JavaScript代码。
    • ts-loader:将TypeScript代码转换为JavaScript代码。
  2. 样式加载器:用于处理样式文件(如CSS、Sass、Less)。常用的样式加载器有style-loader、css-loader、sass-loader等。

    • style-loader:将CSS代码注入到JavaScript中,通过DOM操作去加载CSS。
    • css-loader:加载CSS文件,支持模块化、压缩、文件导入等特性。
    • sass-loader:将Sass/SCSS文件编译为CSS文件。
  3. 文件加载器:用于处理静态资源文件(如图片、字体)。常用的文件加载器有file-loader、url-loader等。

    • file-loader:把文件输出到一个文件夹中,在代码中通过相对URL去引用输出的文件。
    • url-loader:和file-loader类似,但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。
  4. 数据加载器:用于处理数据文件(如JSON、XML)。常用的数据加载器有json-loader(Webpack 2+已内置对JSON的支持,因此不再需要单独的json-loader)、xml-loader等。

    • json-loader(已废弃):用于加载JSON文件(Webpack 2+已内置此功能)。
    • xml-loader:用于加载和处理XML文件。

三、加载器的配置与使用

在Webpack的配置文件(通常是webpack.config.js)中,可以通过module.rules数组来配置加载器。每个规则对象都包含一个test属性和一个use属性。

  • test属性:一个匹配文件的正则表达式,用于指定哪些文件应该被这个规则所处理。
  • use属性:一个加载器数组,指定了处理这些文件时应该使用的加载器及其顺序。

例如,要配置Webpack来处理CSS文件,可以在webpack.config.js中添加以下规则:

module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]
}

这个规则告诉Webpack,当遇到以.css结尾的文件时,应该使用style-loadercss-loader这两个加载器来处理它们。注意,加载器的调用顺序是从后往前的,即先调用css-loader,然后再调用style-loader

四、加载器的特点与优势

  1. 模块化:Webpack加载器可以将各种类型的文件模块化,使得开发者可以使用模块化的方式组织和管理代码。
  2. 自动化:Webpack加载器可以自动处理文件的转换和处理过程,减少了手动配置的工作量。
  3. 生态丰富:Webpack加载器拥有庞大的生态系统,开发者可以根据需求选择适合的加载器,提高开发效率。
  4. 跨平台:Webpack加载器可以在不同的操作系统和平台上运行,具有良好的跨平台性。

综上所述,Webpack加载器是Webpack中非常重要的一个组成部分,它使得Webpack能够处理各种不同类型的文件,并将它们转换为Webpack可识别的模块。通过合理配置和使用加载器,开发者可以更加高效地进行前端开发。

插件

Webpack插件机制是Webpack的核心功能之一,它允许开发者通过插件来扩展Webpack的功能,以满足不同的开发需求。以下是对Webpack插件机制的详细解释:

一、插件的定义与作用

Webpack插件是一个具有apply方法的JavaScript对象,其作用是在Webpack构建流程中的特定阶段执行特定的任务。通过插件,开发者可以自定义Webpack的构建过程,如优化打包结果、压缩代码、生成静态资源等。

二、插件的工作原理

Webpack插件通过订阅Webpack编译器(Compiler)和编译(Compilation)对象的事件钩子(Hooks)来实现其功能。这些钩子在Webpack构建过程的不同阶段触发,允许插件在适当的时机执行操作。

  1. Compiler对象:代表整个Webpack构建过程,包含了Webpack配置、文件系统等信息。插件可以通过订阅Compiler的钩子来在构建过程的特定时刻执行操作。
  2. Compilation对象:代表一次单独的构建。每次文件更改时,Webpack都会创建一个新的Compilation对象。Compilation对象包含了当前构建的所有模块、资源等信息。插件可以通过订阅Compilation的钩子来在构建过程的特定阶段执行操作。

三、插件的使用方式

要使用一个Webpack插件,首先需要安装它,然后在Webpack配置文件中引入并实例化。以下是一个简单的使用插件的例子:

// 安装插件(以html-webpack-plugin为例)
npm install html-webpack-plugin --save-dev// 在webpack.config.js中引入并实例化插件
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// ... 其他配置plugins: [new HtmlWebpackPlugin({template: './src/index.html', // 指定模板文件filename: 'index.html' // 指定输出文件名})]
};

在这个例子中,我们使用了html-webpack-plugin插件,它可以自动生成一个HTML文件,并将打包后的bundle文件自动插入到该HTML文件中。

四、编写自定义插件

要编写一个自定义Webpack插件,需要创建一个具有apply方法的类。apply方法接收一个compiler对象,可以通过该对象访问Webpack的构建过程。以下是一个简单的自定义插件示例:

class MyCustomPlugin {apply(compiler) {compiler.hooks.done.tap('MyCustomPlugin', (stats) => {console.log('Webpack build is done!');});}
}module.exports = MyCustomPlugin;

在这个例子中,我们创建了一个名为MyCustomPlugin的插件,它在Webpack构建完成时输出一条消息。

五、插件的优势与特点

  1. 可扩展性:通过插件机制,Webpack可以轻松地扩展其功能,满足不同的开发需求。
  2. 灵活性:开发者可以根据自己的需求编写自定义插件,实现特定的功能。
  3. 社区支持:Webpack拥有丰富的插件生态系统,开发者可以利用社区提供的插件来提高开发效率。
  4. 维护性:插件机制使得Webpack的核心功能更加简洁明了,同时也方便了对插件的维护和更新。

综上所述,Webpack插件机制是Webpack的核心功能之一,它允许开发者通过插件来扩展Webpack的功能,提高开发效率和灵活性。通过合理配置和使用插件,开发者可以更加高效地进行前端开发。

常见的插件有哪些

Webpack是一个功能强大的前端构建工具,其插件系统为开发者提供了丰富的功能扩展。以下是一些常见的Webpack插件及其功能介绍:

  1. CleanWebpackPlugin

    • 功能:在打包前自动清理输出目录,确保每次打包后只保留最新的打包结果,避免手动删除旧文件。
    • 重要性:有助于保持构建目录的整洁,避免旧文件对构建结果的影响。
  2. HtmlWebpackPlugin

    • 功能:用于生成HTML文件,自动将打包后的JavaScript和CSS文件插入到HTML模板中,并处理多入口文件的引用问题。
    • 重要性:简化了HTML文件的生成过程,使得开发者可以专注于业务逻辑的开发。
  3. CopyWebpackPlugin

    • 功能:用于复制文件到输出目录,例如将静态资源文件复制到dist目录。
    • 重要性:方便将项目中的静态资源(如图片、字体等)复制到构建输出目录。
  4. UglifyJsPlugin(注意:Webpack 4+ 版本中建议使用terser-webpack-plugin作为替代)

    • 功能:用于压缩JavaScript代码,减少文件大小,提高加载速度。
    • 重要性:有助于优化前端性能,减少网络传输时间。
  5. DefinePlugin

    • 功能:用于定义全局常量,可以在代码中直接使用这些常量,方便配置和管理。
    • 重要性:有助于在代码中注入环境变量或配置信息,提高代码的可维护性。
  6. HotModuleReplacementPlugin

    • 功能:用于实现模块热替换,无需刷新页面即可更新部分代码。
    • 重要性:提高了开发效率,使得开发者可以在不刷新页面的情况下实时查看代码修改效果。
  7. WebpackBundleAnalyzer

    • 功能:使用交互式可缩放树图可视化webpack输出文件的大小,帮助开发者分析打包结果。
    • 重要性:有助于识别和优化项目中的大文件或冗余代码。
  8. MiniCssExtractPlugin

    • 功能:将CSS提取到单独的文件中,支持按需加载CSS和SourceMaps。
    • 重要性:有助于避免将样式打包在JS中引起的页面样式加载错乱现象,同时方便CSS的缓存和更新。
  9. OptimizeCSSAssetsPlugin(注意:Webpack 5+ 版本中建议使用css-minimizer-webpack-plugin作为替代)

    • 功能:压缩CSS文件,减少文件大小。
    • 重要性:有助于优化前端性能,减少CSS文件的加载时间。
  10. ImageminPlugin

    • 功能:批量压缩图片,减少图片文件的大小。
    • 重要性:有助于优化前端性能,减少图片资源的加载时间。
  11. PurgeCSSPlugin(或PurgeCSS与Webpack的集成插件)

    • 功能:从CSS中删除未使用的选择器,删除多余的CSS代码。
    • 重要性:有助于减少CSS文件的大小,提高页面的加载速度。
  12. SplitChunksPlugin

    • 功能:在Webpack配置中的optimization字段中配置,用于将文件提取打包成公共模块,如抽取node_modules里的文件。
    • 重要性:有助于减少重复代码,提高代码的复用性和构建效率。
  13. CompressionPlugin

    • 功能:启用gzip压缩,减少输出文件的大小。
    • 重要性:有助于优化前端性能,减少网络传输时间。

这些插件通过扩展Webpack的功能,帮助开发者更高效地处理项目中的各种需求,提升开发效率和项目质量。在实际项目中,开发者可以根据项目需求选择合适的插件进行配置和使用。

完整示例

Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。它会根据模块的依赖关系进行静态分析,然后将这些模块打包成一个或多个bundle。以下通过一个完整的例子来说明Webpack的作用:

例子背景

假设我们正在开发一个简单的Web项目,项目结构如下:

my-webpack-project/
├── dist/
├── src/
│   ├── index.js
│   ├── main.css
│   └── app.less
├── package.json
└── webpack.config.js

其中,src/目录包含我们的源代码,dist/目录将用于存放打包后的文件。index.js是JavaScript入口文件,main.css是普通的CSS文件,app.less是LESS文件(一种CSS预处理器)。

Webpack的作用演示

  1. 初始化项目

    首先,我们需要初始化npm项目并安装Webpack及其CLI工具:

    mkdir my-webpack-project
    cd my-webpack-project
    npm init -y
    npm install --save-dev webpack webpack-cli
    
  2. 创建入口文件

    src/目录下创建index.js文件,并添加以下内容:

    import './main.css';
    import './app.less';function component() {const element = document.createElement('div');element.innerHTML = 'Hello, Webpack!';return element;
    }document.body.appendChild(component());
    

    这里,我们导入了main.cssapp.less文件。

  3. 配置Webpack

    在项目根目录下创建webpack.config.js文件,并添加以下内容:

    const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]},mode: 'development'
    };
    

    在这个配置文件中,我们指定了入口文件、输出文件的名称和路径,以及如何处理CSS和LESS文件。我们需要安装相应的loader来处理这些文件:

    npm install --save-dev style-loader css-loader less less-loader
    
  4. 打包项目

    现在,我们可以运行Webpack来打包项目:

    npx webpack --config webpack.config.js
    

    这条命令会根据webpack.config.js文件中的配置来打包项目,并将打包后的文件输出到dist/目录下。

  5. 查看结果

    打包完成后,我们会在dist/目录下看到一个名为bundle.js的文件。这个文件包含了index.jsmain.cssapp.less的所有内容,并且已经被Webpack处理成浏览器可以直接识别的格式。

    接下来,我们可以在dist/目录下创建一个简单的index.html文件来引入这个打包后的文件:

    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Webpack Example</title>
    </head>
    <body><script src="bundle.js"></script>
    </body>
    </html>
    

    现在,我们可以在浏览器中打开这个index.html文件,并看到页面上显示了“Hello, Webpack!”的文本。

Webpack的作用总结

通过这个例子,我们可以看到Webpack的以下几个作用:

  • 模块打包:Webpack将我们的JavaScript、CSS和LESS文件打包成一个单一的bundle.js文件,这样浏览器只需要加载一个文件就可以运行整个应用程序。
  • 依赖管理:Webpack会根据模块的依赖关系进行静态分析,确保所有依赖都被正确地打包到输出文件中。
  • 资源转换:通过配置相应的loader,Webpack可以处理各种不同类型的资源文件(如CSS、LESS、图片等),并将它们转换成浏览器可以直接识别的格式。
  • 开发优化:Webpack提供了许多开发时的优化功能,如实时重新加载(通过webpack-dev-server)、代码分割、热模块替换等,这些功能可以大大提高开发效率。

综上所述,Webpack是一个功能强大的模块打包器,它可以帮助我们更高效地开发和管理前端应用程序。

参考文献

【前端知识】Window下node安装以及配置

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

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

相关文章

用vscode编写verilog时,如何有信号定义提示、信号定义跳转(go to definition)、模块跳转(跨文件跳转)这些功能

&#xff08;一&#xff09;方法一&#xff1a;安装插件SystemVerilog - Language Support 安装一个vscode插件即可&#xff0c;插件叫SystemVerilog - Language Support。虽然说另一个插件“Verilog-HDL/SystemVerilog/Bluespec SystemVerilog”也有信号提示及定义跳转功能&am…

从零开始搭建Java开发环

目录 引言 一、JDK安装 二、IDE选择与配置 三、构建工具配置 四、测试环境搭建 五、其他建议 引言 随着Java技术的不断进步与应用范围的不断扩大&#xff0c;越来越多的开发者加入到了Java开发的行列。一个高效稳定的开发环境是提高开发效率的基础。本文将详细介绍如何从零…

uniapp vue3小程序报错Cannot read property ‘__route__‘ of undefined

在App.vue里有监听应用的生命周期 <script>// 只能在App.vue里监听应用的生命周期export default {onError: function(err) {console.log(AppOnError:, err); // 当 uni-app 报错时触发}} </script>在控制台打印里无意发现 Cannot read property ‘__route__‘ of …

Vue3插槽v-slot使用方式

在 Vue 3 中&#xff0c;v-slot 是用来定义和使用插槽的指令。插槽是 Vue 的一个功能&#xff0c;允许你在组件内部定义占位内容&#xff0c;便于在父组件中提供动态内容。以下是 v-slot 的详细使用方法&#xff1a; 1. 基础使用 <template><BaseComponent><te…

Android 网络请求(二)OKHttp网络通信

学习笔记 OkHttp 是一个非常强大且流行的 HTTP 客户端库&#xff0c;广泛用于 Android 开发中进行网络请求。与 HttpURLConnection 相比&#xff0c;OkHttp 提供了更简单、更高效的 API&#xff0c;特别是在处理复杂的 HTTP 请求时。 如何使用 OkHttp 进行网络请求 以下是使…

Vue 3 国际化 (i18n) 最佳实践指南

1. 安装依赖 npm install vue-i18n@9 2. 项目结构建议 src/ ├── i18n/ │ ├── index.ts # i18n 配置文件 │ ├── languages/ # 语言文件目录 │ │ ├── zh-CN.ts # 中文 │ │ ├── en-US.ts # 英文 │ │ └─…

Ubuntu20.04升级glibc升级及降级的心路历程

想使用pip安装Isaac Sim&#xff0c;无奈此方法只支持 GLIBC>2.34 。使用的是Ubuntu20.04&#xff0c;使用 ldd --version 查看GLIBC版本&#xff0c;如果版本低于 2.34 则需要升级GLIBC&#xff0c;基于此开始了长达一天的尝试。 请注意&#xff0c;升级GLIBC是一个危险操作…

Android开发实战班 - 网络编程 - WebSocket 实时通信

在现代应用开发中&#xff0c;实时通信是许多应用的核心功能之一&#xff0c;例如聊天应用、实时通知、在线游戏等。WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议&#xff0c;能够实现服务器与客户端之间的实时双向数据交换。相比于传统的 HTTP 请求&#xff0c;Web…

如何从android的webview 取得页面上的数据

要从Android的WebView中获取页面上的数据&#xff0c;通常有几种常见的方法&#xff1a; JavaScript Interface&#xff1a;通过JavaScript和Android Interface进行通信。这种方法允许你在JavaScript中调用Android的方法&#xff0c;反之亦然。 Evaluate JavaScript&#xff…

力扣--LCR 140.训练计划||

题目 给定一个头节点为 head 的链表用于记录一系列核心肌群训练项目编号&#xff0c;请查找并返回倒数第 cnt 个训练项目编号。 示例 1&#xff1a; 输入&#xff1a;head [2,4,7,8], cnt 1 输出&#xff1a;8 提示&#xff1a; 1 < head.length < 100 0 < hea…

奶龙IP联名异军突起:如何携手品牌营销共创双赢?

在快节奏的互联网消费时代&#xff0c;年轻消费群体对产品和品牌的要求越来越挑剔。因此在品牌年轻化的当下&#xff0c;一方面需要品牌自身形象也要不断追求时代感&#xff0c;另一方面品牌也需要不断引领消费者需求&#xff0c;提升竞争力和产品力。 奶龙作为近年来异军突起…

Java LinkedList 详解

LinkedList 是 Java 集合框架中常用的数据结构之一&#xff0c;位于 java.util 包中。它实现了 List、Deque 和 Queue 接口&#xff0c;是一个双向链表结构&#xff0c;适合频繁的插入和删除操作。 1. LinkedList 的特点 数据结构&#xff1a;基于双向链表实现&#xff0c;每个…

ROM修改进阶教程------安卓14去除修改系统应用后导致的卡logo验证步骤 适用安卓13 14 安卓15可借鉴参考

上期的博文解析了安卓14 安卓15去除系统应用签名验证的步骤解析。我们要明白。修改系统应用后有那些验证。其中签名验证 去卡logo验证 与可降级安装应用验证等等的区别。有些要相互结合使用。今天的博文将对修改系统应用后卡logo验证做个步骤解析。 通过博文了解💝💝�…

【Spring boot】微服务项目的搭建整合swagger的fastdfs和demo的编写

文章目录 1. 微服务项目搭建2. 整合 Swagger 信息3. 部署 fastdfsFastDFS安装环境安装开始图片测试FastDFS和nginx整合在Storage上安装nginxnginx安装不成功排查:4. springboot 整合 fastdfs 的demodemo编写1. 微服务项目搭建 版本总结: spring boot: 2.6.13springfox-boot…

Docker 篇-Docker 详细安装、了解和使用 Docker 核心功能(数据卷、自定义镜像 Dockerfile、网络)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Docker 概述 1.1 Docker 主要组成部分 1.2 Docker 安装 2.0 Docker 常见命令 2.1 常见的命令介绍 2.2 常见的命令演示 3.0 数据卷 3.1 数据卷常见的命令 3.2 常见…

部门管理系统功能完善(删除部门、添加部门、根据 ID 查询部门 和 修改部门)

一、目标 继续实现 删除部门、添加部门、根据 ID 查询部门 和 修改部门 的详细功能实现&#xff0c;分为 Controller 层、Service 层 和 Mapper 层。 二、代码分析 总体代码&#xff1a; Controller 层&#xff1a; package com.zhang.Controller; Slf4j RequestMapping(&qu…

三格电子-EtherNet IP转Modbus TCP网关

EtherNet/IP转Modbus TCP网关 SG-EIP-TCP-210 产品用途 SG-EIP-TCP-210 网关可以实现将 Modbus TCP 接口设备连接到 EtherNet/IP 网络中。用户不需要了解具体的 Modbus TCP 和 EtherNet/IP 协议即可实现将 Modbus TCP 设备挂载到 EtherNet/IP 接口的 PLC 上&#xff0c;并和 …

查找redis数据库的路径

Redis 数据库的路径通常由配置文件中的 dir 参数指定 查找 Redis 配置文件&#xff1a; Redis 配置文件通常命名为 redis.conf。您可以在以下位置查找它&#xff1a; /etc/redis/redis.conf&#xff08;Linux 系统上的常见位置&#xff09;/usr/local/etc/redis/redis.conf&…

java:简单小练习,面积

面积&#xff1a;圆和长方形 接口&#xff1a;实现面积 test:调用 一、interface: 对于接口&#xff0c;它是Java中一个新增的知识点&#xff0c;而C中没有&#xff0c;因为Java有一个缺陷就是不可以实现多继承&#xff0c;只可以单继承&#xff0c;这就限制了有些功能的使…

241117学习日志——[CSDIY] [ByteDance] 后端训练营 [05]

CSDIY&#xff1a;这是一个非科班学生的努力之路&#xff0c;从今天开始这个系列会长期更新&#xff0c;&#xff08;最好做到日更&#xff09;&#xff0c;我会慢慢把自己目前对CS的努力逐一上传&#xff0c;帮助那些和我一样有着梦想的玩家取得胜利&#xff01;&#xff01;&…