webpack 的基本使用及配置

news2024/11/24 3:23:27

webpack 的基本使用

  • 配置 npm 镜像源
  • 创建列表隔行变色案例
      • 新建空白项目目录，初始化 package.json 配置文件
      • 通过 npm 安装 jquery
      • 新建 src 源代码目录
          • index.html
          • index.js
      • 检查网页效果
  • webpack 的安装
      • webpack 的安装
      • dependencies 与 devDependencies
          • 参数 -S 及 --save
          • 参数 -D 及 --save-dev
          • dependencies 与 devDependencies
          • 使用 -S 还是 -D
  • webpack 的配置
      • webpack 配置文件
      • package.json 的 script 节点
  • webpack 的使用
      • 开发模式与发布模式
  • 指定 webpack 的 entry 及 output
      • 举个栗子
  • webpack 实现页面自动刷新
      • 安装所需插件
      • 配置 webpack-dev-server
      • 细节
      • html-webpack-plugin
      • html-webpack-plugin 的另一个功能
  • devServer 节点

配置 npm 镜像源

npm 默认使用的是国外的源对软件包进行安装，我们可以通过将网页链接修改为国内镜像源提升软件包的安装速度。

使用如下修改 npm 镜像源（淘宝镜像源）：

npm config set registry https://registry.npm.taobao.org

使用如下命令观察 npm 程序目前所使用的镜像源：

npm config get registry

目前所使用的镜像源

创建列表隔行变色案例

新建空白项目目录，初始化 package.json 配置文件

在创建空白项目目录后，在该目录下运行如下命令以初始话配置文件：

npm init -y

# 若你希望可以初始话配置文件中的某些信息，可以使用如下命令

npm init

在使用 npm init -y 命令后，你能够在项目文件中观察到新增文件 package.json。

里面的内容如下（可能与你的略有不同）：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

通过 npm 安装 jquery

使用如下命令通过 npm 安装 jquery：

npm install -S jquery

# 或

npm install --save jquery

# 或

npm install jquery

新建 src 源代码目录

在项目根目录下创建 src 文件夹，并在其中放置你的网页文件。

index.html

为实现列表隔行变色效果，我们将创建包含如下内容的 index.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>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>
    <!-- 导入 index.js 文件 -->
    <script src="./index.js"></script>
</body>
</html>

对于上述代码中的九个列表，在 VScode 中可以通过输入如下命令并敲击回车键（Enter）快速生成：

ul>li{这是第 $ 个 li}*9

在这里插入图片描述

index.js

在此我们将使用 ES6 的模块化导入方式来导入 jquery，来验证 webpack 是否具有解决兼容性问题的能力。

import $ from 'jquery'
// 使用 $ 来接受导入的 jquery 模块


// li:add 选中排位位于奇数位次的 li 标签
// li:even 选中排位位于偶数次的 li 标签
$(function(){
    $('li:odd').css('background-color', 'red')
    $('li:even').css('background-color', 'pink')
})

检查网页效果

将 index.html 在浏览器中打开，可以看到希望产生的效果并没有实现。

没有产生希望产生的效果

让我们打开控制台（快捷键 F12），可以观察到报错信息：

Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

大意是我们无法在模块外部使用 import 语句，也就是不支持该语法。
控制台

webpack 的安装

webpack 的安装

在终端中输入如下命令以进行 webpack 的安装：

npm install webpack webpack-cli -D
  1. 如果各位对 webpack 的某个版本较为中意，可以通过使用 @ 符号来指定版本，这里以安装 webpack 5.42.1 来进行演示。
npm install webpack@5.42.1 -D
  1. webpack-cli 是 webpack 的命令行版本。

dependencies 与 devDependencies

在安装完成 webpack 及 webpack-cli 后，让我们把目光望向 package.json 文件。

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.3"
  },
  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

可以看到 jquety 被存放到 dependencies 下，而 webpack 及 webpack-cli 都被存放到 devDependencies 中。照成这种现象的原因与我们两次安装软件包使用的命令参数存在不同。

参数 -S 及 --save

在使用 npm 安装软件包时，默认使用的参数就是 -S 或 –save，使用该参数对包进行安装后，软件包的名称都将出现在 dependencies 中。

参数 -D 及 --save-dev

使用 -D 或 –save-dev 参数对包进行安装后，软件包的名称都将出现在 devDependencies 中。

dependencies 与 devDependencies
  1. dependencies
    dependencies 所包含的包是在开发阶段及发布阶段都需要包含（在两个阶段中发挥作用的软件包）到的软件包。
  2. devDependencies
    devDependencies 所包含的包是在开发阶段需要包含但在发布阶段不需要包含的软件包。

对软件包进行 dependencies 及 devDependencies 进行区分，可以减少在发布阶段所需要打包的内容，减少网站成品所占用的服务器资源。

使用 -S 还是 -D

在开发过程中，我们往往会需要用到很多的软件包，安装这些软件包究竟是使用命令参数 -S 好，还是使用命令参数 -D 好呢？

在安装一个包时如果存在上述疑惑，推荐各位可以使用 npm 官网，里面有许多软件包的具体信息。当然，查看该网站，你还可以收获上述问题的解决之道。

比如，对于 webpack，该网站中存在着如下建议：

建议

webpack 的配置

webpack 配置文件

在对 webpack 进行配置之前，需要在项目根目录下新建 webpack 配置文件，该文件的名称为 webpack.config.js。

在创建该配置文件后，请向该配置文件中输入如下内容：

module.exports = {
	mode: "development"
}

其中：
mode 用来指定模式，其取值有两种，development 用来指定当前项目的模式为 开发模式；production 用来指定当前项目的模式为 发布模式。

package.json 的 script 节点

在配置完成 webpack.config.js 配置文件后，我们需要在 package.json 文件中的 script 节点中添加内容：

"script": {
	"dev": "webpack"
}

修改完成后， package.json 文件大概长这样：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.3"
  },
  "devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

webpack 的使用

在终端中使用如下命令使用 webpack 对网页源代码文件进行打包：

npm run dev

在使用该命令后，可以观察到项目文件中多出了一个文件夹 dist，dist 文件夹中的 main.js 文件便是此次 webpack 对文件打包的结果。

由于 main.js 文件是文件打包的结果，所以我们需要对 index.html 进行修改，引入 main.js 文件。

<!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>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>
    <!-- 导入 main.js 文件 -->
    <script src="../dist/main.js"></script>
</body>
</html>

将 index.html 在浏览器中打开，可以发现该网页已经可以正常运行，webpack 成功的解决了依赖问题。

成功显示页面

开发模式与发布模式

webpack 能够对被打包文件进行压缩混淆，但当我们打开文件 main.js 可以观察到该文件并没有被压缩混淆。但其中的确有部分代码被压缩了，但那是 jquery。我们的 webpack 并没有对打包文件进行压缩混淆。

原因是：
压缩混淆所需要的时间往往都比较长，在开发阶段每次打包都需要耗费较多的时间用于打包是得不偿失的。如果需要对被打包文件进行压缩混淆，就需要我们对 webpack.config.js 文件进行配置，将模式设置为 发布模式（production） 即可。

为使用 webpack 的压缩混淆功能，我们将 webpack.config.js 中的内容修改为如下结果：

module.exports = {
	mode: "production"
}

修改完成后，我们再次运行如下命令：

npm run dev

由程序打印的消息，我们可以观察到，本次打包程序所耗费的时间是使用开发模式打包所耗费时间的近 七倍，所耗费的空间是使用开发模式进行打包所耗费空间的近 四倍。

指定 webpack 的 entry 及 output

在 webpack 4.x 及 5.x 的版本中，默认存在如下约定：

  1. 默认的入口文件为：
    项目文件根目录下的 src 文件夹中的 index.js 文件。
  2. 默认的导出文件为：
    项目文件根目录下的 dist 文件夹中的 main.js 文件。

我们可以通过修改 webpack.config.js 来对入口文件及导出文件进行修改。

举个栗子

将导出文件设置为 项目文件根目录下的 result 文件夹中的 bundle.js 文件；将输入文件显式设置为 webpack 的默认输入文件。

为达成上述目的，我们将 webpack.config.js 做出如下修改：

const path = require("path");


module.exports = {
	mode: "development",
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './result'),
        filename: 'bundle.js'
    }
}

其中：

  1. path.join( […paths] )
    paths: 它是逗号分隔的一系列路径，这些路径将连接在一起以构成最终路径。构成的最终路径将作为返回值返回。
    join() 是 Node.js 下的 path 模块中的函数，所以使用该函数前需要通过 require() 函数将其导入。
  2. __dirname
    __dirname 指当前文件所在的文件夹，由于 webpack.config.js 位于项目文件的根目录下，所以此处的 __dirname 代指项目文件所在的路径。
  3. 在该配置文件中，我们使用 entry 来定义入口文件，使用 output 来定义导出文件。

在配置完成配置文件 webpack.config.js 后，我们使用命令 npm run dev，可以发现导出文件已在指定路径下成功显示，这表明我们对导入导出文件的设置是正确的。

成功修改导入导出文件

webpack 实现页面自动刷新

在日常开发过程中，如果每次查看网页的效果都需要先执行命令 npm run dev 后再刷新页面，会大大影响各位码农的工作心情。
我们可以通过 webpack-dev-server 及 html-webapck-plugin 这两款插件来帮助我们解决这个问题。

安装所需插件

在终端中输入如下命令以安装所需的插件：

npm install webpack-dev-server html-webpack-plugin -D

配置 webpack-dev-server

对 package.json 文件中的 script 节点进行如下更改：

"script": {
"dev": "webpack serve" //将此项由 webpack 修改为 webpack serve
}

修改完成后的 package.json 文件大概长这样：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.3"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

在配置 webpack-dev-server 后，我们再执行命令：

npm run dev

可以发现，在使用该命令完成打包后，程序并没有立即退出。并且此时，如果我们对 index.js 文件（即入口文件）进行保存，webpack 也会自动对其进行打包。

自动打包

细节

在使用 webpack-dev-server 对入口文件进行自动打包的结果并不会直接存储到物理磁盘中，而是会直接存储到内存中。你可以在项目文件的根目录下访问到该文件虽然你看不到它。

还记得使用 webpack-dev-server 后使用命令 npm run dev 后打印的前几行消息吗？
细节1

这段打印信息告诉我们，我们可以通过访问链接 http://localhost:8080/ 或 http://192.168.0.105:8080/ 来对项目根目录进行访问。

根目录

虽然我的网页好像发生了错误，但还是可以访问那个看不到的导出文件 main.js。

访问链接 http://localhost:8080/main.js 来对 main.js 进行访问。
可以看到被打包后的 main.js 文件：

被打包后的 main.js 文件

在 webpack 结束运行前，打包后的文件都将存储在内存中，可以在项目文件根目录中访问到该文件。

html-webpack-plugin

html-webpack-plugin 插件可以自动地将某个路径下的文件复制到其他路径下，该文件并不会存在于物理磁盘中，在 webpack 运行过程中，该文件都将暂存于内存中，在 webpack 停止运行时，将该文件写入物理磁盘（复制的文件中所发生的修改在 webpack 中止运行后将写入原文件中）中。

在 webpack.config.js 文件添加如下内容对该插件进行配置：

const HtmlPlugin = require('html-webpack-plugin);

const htmlPlugin = new HtmlPlugin({
	template: './src/index.html',
	filename: './index.html'
)}

module.exports = {
	plugins: [htmlPlugin]
}

其中：

  1. template 指定需要复制的文件，filename 则指定该文件需要复制到的路径。

webpack 文件修改后大概长这样：

const path = require("path");
const HtmlPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',
    filename: './index.html'
})


module.exports = {
	mode: "development",
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    },
    plugins: [htmlPlugin]
}

修改配置后，每当我们使用命令 npm run dev 后，index.html 都将移动到项目文件的根目录中。此时我们只需要访问 http://localhost:8080/ 即可直接访问 index.html 文件。并且我们对 index.js 的修改在对 index.js 文件保存后都将反映到页面中。

html-webpack-plugin 的另一个功能

其实，html-webpack-plugin 并不只有复制文件这一个功能。该插件还可以帮助我们在 index.js 导入入口文件。我们可以通过如下方式对其进行验证。

首先，将 index.html 中的导入 JavaScript 文件的代码删去，删除后的 index.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>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>
</body>
</html>

然后执行命令 npm run dev，打开链接 http://localhost:8080/ 对 index.html 进行访问，可以发现我们即使没有在 index.html 文件中导入 index.js 文件，该文件也依旧在发挥功能。

仍在起作用

devServer 节点

在配置文件 webpack.config.js 文件中的 devServer 节点下，我们还可以对 webpack-dev-server 插件进行更多的配置。

devServer: {
	open: true,
	host: '127.0.0.1',
	port: 80
}

其中：

  1. open 用来指定是否要自动打开浏览器
  2. host 及 port 用来指定打开浏览器（若浏览器已被打开将不会再打开新浏览器）后需要打开的网址及端口号。

在对配置文件进行如上添加后，在使用命令 npm run dev 后将会自动使用浏览器打开指定页面。

自动打开指定文件

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

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

相关文章

规则引擎easy-rule快速入门及整合SpEL使用

规则引擎easy-rule快速入门及整合SpEL使用

规则引擎介绍 规则引擎解决的实际上就是判断条件分支过多的问题&#xff0c;举个例子&#xff0c;营销策略里&#xff0c;消费不足200&#xff0c;可用10元消费券&#xff0c;消费超过200元&#xff0c;可以享受9折优惠&#xff0c;超过400元和享受8折优惠。这里可以直接用if …
阅读更多...
【houdini】带着uv进行模拟(冰激凌案例）

【houdini】带着uv进行模拟(冰激凌案例）

整个sop的路线图 前半部分&#xff1a;赋予材质并分离冰激凌球 一般模型是分部分的&#xff0c;比方说下面这个冰激凌的&#xff0c;分为5个部分。三个不同的冰激凌球和水和杯子。这些部分在houdini中被称为group。 用material节点一口气赋予5个group材质。 具体的材质的指…
阅读更多...
【Linux】 gcc 、动态库和静态库，程序是如何链接的

【Linux】 gcc 、动态库和静态库，程序是如何链接的

文章目录前言一、gcc 是什么&#xff1f;二、使用步骤1.预编译2.编译3.汇编4.链接三、动静态库1.概念2.区别前言 在Linux环境下&#xff0c;除了学好编辑器 vim 的使用&#xff0c;还需要学会C语言的编译器 gcc 的功能&#xff0c;否则代码无法翻译成可执行程序。本文将介绍 gc…
阅读更多...
怎样快速地迁移 MySQL 中的数据？

怎样快速地迁移 MySQL 中的数据？

我们通常会遇到这样的一个场景&#xff0c;就是需要将一个数据库的数据迁移到一个性能更加强悍的数据库服务器上。这个时候需要我们做的就是快速迁移数据库的数据。那么&#xff0c;如何才能快速地迁移数据库中的数据呢&#xff1f;今天我们就来聊一聊这个话题。数据库的数据迁…
阅读更多...
Spring Boot 日志详解

Spring Boot 日志详解

Spring Boot 日志一、日志有什么用二、日志怎么用三、自定义日志打印3.1 在程序中得到日志对象3.2 使用日志对象打印日志四、日志级别4.1 日志级别有什么用4.2 日志级别的分类与使用4.3 日志级别设置五、日志持久化5.1 配置文件名5.2 配置保存路径六、更简单的日志输出 -- lomb…
阅读更多...
Go第 13 章 ：2-客户信息关系系统

Go第 13 章 ：2-客户信息关系系统

Go第 13 章 &#xff1a;2-客户信息关系系统 13.1 项目需求分析 模拟实现基于文本界面的《客户信息管理软件》。该软件能够实现对客户对象的插入、修改和删除&#xff08;用切片实现&#xff09;&#xff0c;并能够打印客户明细表 13.2 项目的界面设计 主菜单界面 添加客户…
阅读更多...
SegFormer笔记（1）安装

SegFormer笔记（1）安装

一、代码地址github地址&#xff1a;https://github.com/NVlabs/SegFormer二、我的系统配置&#xff1a;1、硬件2、软件win10&#xff0c;vs2022&#xff0c;python3.7三、创建虚拟环境conda create -n MySegFormer python3.7 numpy conda activate MySegFormer python会显示如…
阅读更多...
【知识图谱工具汇总】

【知识图谱工具汇总】

一&#xff0c;图表示学习与计算框架 1&#xff09;PyTorch Geometric&#xff08;PyG&#xff09; 由德国多特蒙德工业大学研究者推出的基于PyTorch的几何深度学习扩展库。PyG在学术中是比较热门的框架&#xff0c;但是PyG对于异构图以及大规模的图的学习存在着较大的局限性…
阅读更多...
【UE4 第一人称射击游戏】39-“M4A1”武器设置

【UE4 第一人称射击游戏】39-“M4A1”武器设置

上一篇&#xff1a;【UE4 第一人称射击游戏】38-拾取“M4A1”的提示信息步骤&#xff1a;在“AK47”文件夹中拷贝一份“Weapon_Base”拷贝到“M4A1”文件夹下&#xff0c;重命名为“Weapon_M4A1”打开“Weapon_M4A1”&#xff0c;新添加一个网格体组件骨架网格体选择“M4A1_wea…
阅读更多...
Linux编辑器-gcc/g++使用

Linux编辑器-gcc/g++使用

目录 背景&#xff1a; 预处理&#xff1a; 编译&#xff1a; 汇编&#xff1a; 连接&#xff1a; 静态连接&#xff1a; 动态连接&#xff1a; 自动化编程make/makefile&#xff1a; 背景&#xff1a; 我们知道任何一个c语言或者c文件想要生成一个可执行程序必须完成4个…
阅读更多...
NotepadAttr

NotepadAttr

EntityMyPKAttr目录概述需求&#xff1a;设计思路实现思路分析1.Notepads2.EntityMyPK3.EntityMyPKAttr4.EntitiesMyPK5.EntityMyPKEntityMyPKAttrEntitiesMyPKWebContralBaseAtParaCashChartType参考资料和推荐阅读Survive by day and develop by night. talk for import biz …
阅读更多...
JS面试题--JS函数式编程

JS面试题--JS函数式编程

JS函数式编程 实现apply、call、bind 01_call函数的实现 // apply/call/bind的用法 // js模拟它们的实现? 难度// 给所有的函数添加一个hycall的方法 同个原型链 Function.prototype.hycall function (thisArg, ...args) {// 在这里可以去执行调用的那个函数(foo)// 问题: …
阅读更多...
亚马逊云科技：“云”筹帷幄，打造数据驱动型企业

亚马逊云科技：“云”筹帷幄，打造数据驱动型企业

数据对提高企业生产和资源配置的效率、优化经济结构的作用日益凸显。工业和信息化部发布的《“十四五”大数据产业发展规划》已明确将数据作为新时代重要的生产要素和国家基础性战略资源。埃森哲研究显示&#xff0c;到2022年&#xff0c;90%的企业战略明确将把数据作为关键的企…
阅读更多...
前端面试题回顾——React重要知识

前端面试题回顾——React重要知识

文章目录React相关问题1. 函数式组件与Class组件有什么不同&#xff1f;2. 说说React的fiber架构&#xff1f;3. 协调4. 虚拟DOM (Virtual DOM)React相关问题 1. 函数式组件与Class组件有什么不同&#xff1f; 答&#xff1a; ① 函数式组件不需要继承&#xff0c;直接 “fun…
阅读更多...
数据结构基础——认识数据结构与算法

数据结构基础——认识数据结构与算法

目录 &#x1f354;什么是数据结构&#xff1f; &#x1f32d;1.数据的逻辑结构 &#x1f32d;NUM 1 : 集合 &#x1f32d;NUM 2 : 线性结构 &#x1f32d;NUM 2 : 树形结构 &#x1f32d;NUM 4 :图结构&#xff08;网状结构&#xff09;…
阅读更多...
浅谈反弹shell

浅谈反弹shell

目录反弹shell总结一、文件描述符二、重定向1、输入重定向2、输出重定向3、错误输出重定向4、exec 绑定重定向三、实现反弹shell的几种方式方法一&#xff1a; find 反弹ubuntu find反弹shell失败的问题任务计划反弹shell失败的问题方法二&#xff1a;使用python反弹&#xff0…
阅读更多...
Flink系列-4、Flink运行架构

Flink系列-4、Flink运行架构

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议&#xff0c;转载请附上原文出处链接和本声明。 大数据系列文章目录 官方网址&#xff1a;https://flink.apache.org/ 学习资料&#xff1a;https://flink-learning.org.cn/ 目录Flink基石Fli…
阅读更多...
刚当上leader，我让组员去开会，他非说有更重要的会

刚当上leader，我让组员去开会，他非说有更重要的会

☆ 职场上经常有那么一种情况就是组长喊组员开会&#xff0c;开周会&#xff0c;开晨会&#xff0c;开各种会&#xff0c;而更有一种常见的情况呢就是组长缺失威严&#xff0c;喊组员开会&#xff0c;组员不听话&#xff0c;说有更重要的会议&#xff0c;不想参加。 ☆ 本文将以…
阅读更多...
VIT学习心得

VIT学习心得

来源&#xff1a;投稿 作者&#xff1a;橡皮 编辑&#xff1a;学姐 小声逼逼 在过去的两年里&#xff0c;Vision Transformer(ViT)是计算机视觉(cv)领域最有影响力的工作之一。「它推翻了2012年在Alex net中提出的CNN在CV领域的统治地位&#xff1a; 当能够获得足够多的预训练…
阅读更多...
无接触式磁旋转编码器AS5040介绍

无接触式磁旋转编码器AS5040介绍

无接触式磁旋转编码器AS5040简介AS5040 是一款无接触式磁旋转编码器&#xff0c;用于精确测量整个360内的角度。此产品是一个片上系统&#xff0c;在单个封装内整合了集成式Hall 元件、模拟前端和数据信号处理功能。测量角度时&#xff0c;只需简单地配备1 个在芯片中心上方旋转…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023