Webpack5 基本使用 - 2

常用 loader

  • loader 是辅助打包工具。
  • webpack 默认只能打包 js 文件，打包其它模块就需要配置 loader 来告诉 webpack 该怎么去打包其它文件。
  • loader 可以将文件从不同的语言转换为 JavaScript。
  • 一类文件如果需要多个 loader 处理，loader 的执行顺序是从后往前。

打包样式文件

打包 css

css 文件需要先用 css-loader 处理，再用 style-loader 插入 <style></style>标签中。

安装 css-loader、style-loader：

yarn add css-loader style-loader --save

module.exports = {module: {rules: [{test: /\.css$/,use: [// 再用 style-loader 创建 style 标签插入 <head></head> 标签中'style-loader',// css 文件需要先用 css-loader 处理，将 css 编译成 commonjs 整合到 js 中'css-loader']}]}
};

// 使用 localIdentName 自定义生成的样式名称格式，可选的参数有： 
// [path] 表示样式表相对于项目根目录所在路径 
// [name] 表示样式表文件名称 
// [local] 表示样式的类名定义名称 
// [hash:length] 表示32位的hash值 module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader',{loader: 'css-loader',options: {modules: {localIdentName: '[path][name]-[local]'}}}]}]}
};

// index.js
import add from '@utils/add';
import './css/style.css';// import styles from './css/style.css';
// console.log(styles);console.log(add(1, 4));

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1 class="title">hello webpack5</h1>
</body>
</html>

在这里插入图片描述

样式兼容性处理

postcss-loader 自动添加浏览器前缀。

使用 autofixer 插件辅助

autoprefixer 可以指定需要兼容的浏览器。

安装 postcss-loader、autofixer

yarn add postcss-loader autoprefixer --save

// 通过配置加载指定的 css 兼容性样式
// postcss-loader 在 css-loader 之前调用
module.exports = {module: {rules: [{test: /\.scss$/,use: ['style-loader','css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: [['autoprefixer', {// options// 直接在这里指定浏览器版本overrideBrowsersList: ['last 5 versions']}]]}}},'sass-loader']}]}
};
使用 postcss-preset-env 插件辅助

postcss-preset-env 插件可以指定需要添加的浏览器。

安装 postcss-loader、postcss-preset-env

yarn add postcss-loader postcss-prest-env --save

// 通过配置加载指定的css兼容性样式
module.exports = {module: {rules: [{test: /\.scss$/,use: ['style-loader','css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: [["postcss-preset-env",{// Options"browserslist": {"development": [// 兼容最近的一个 chrome 的版本"last 1 chrome version","last 1 firefox version","last 1 safari version",],"production": [// 大于 99.8% 的浏览器">0.2%",// 不要已经死了的浏览器：比如 IE10，兼容没有意义"not dead",// op_mini 的浏览器全都死亡了"not op_mini all"]}},]]}}},'sass-loader']},{test: /\.scss$/,use: ['style-loader','css-loader',{loader: 'postcss-loader',// 写法二options: {ident: 'postcss',plugins: [require('postcss-preset-env')()]}},'sass-loader']}]}
};
打包 less

安装 less、less-loader、css-loader、style-loader

yarn add less less-loader css-loader style-loader --save

module.exports = {module: {rules: [// less-loader 是基于 less 的，所以使用 less-loader 需要同时安装 less{test: /\.less$/,use: ['style-loader','css-loader','less-loader']}]}
};
打包 sass

安装 sass、sass-loader、css-loader、style-loader

yarn add sass sass-loader css-loader style-loader --save

module.exports = {module: {rules: [// sass-loader 是基于 sass 的，所以使用 sass-loader 需要同时安装 sass{test: /\.scss$/,use: ['style-loader','css-loader','postcss-loader','sass-loader']}]}
};
打包 styl

安装 stylus-loader、style-loader、css-loader'

yarn add stylus-loader css-loader style-loader

module.exports = {module: {rules: [{test: /\.scss$/,use: ['style-loader','css-loader','postcss-loader','stylus-loader']}]}
};

打包图片、字体等静态资源

打包图片

webpack4 需要使用url-loader和file-loader，webpack5 已内置，使用模块 asset。

asset/resource
  • 使用 asset/resource 处理的资源会输出到目录中，采用哈希命名
  • file-loader 在 webpack5 中已被 asset/resource 替代。
module.exports = {module: {rules: [{test: /\.(png|jpeg|gif|PNG)$/,type: 'asset/resource'}]}
};

在这里插入图片描述

在这里插入图片描述

const path = require('path');module.exports = {output: {// ...// 指定所有 assetModule 文件的输出目录，同时重命名输出的文件名称// assetModuleFilename: 'static/[hash][ext][query]'},module: {rules: [{test: /\.(png|jpg|jpeg|gif|PNG)$/,type: 'asset/resource',generator: {// 与 assetModuleFilename 只取其一// 输出图片的名称filename: 'images/[hash:8][ext][query]'}}]},
};

在这里插入图片描述

asset/inline
  • url-loader 在 webpack5 中已被 asset/inline 替换。
  • 打包输出的数据 URI 使用 Base64 算法编码的文件内容（可以减少 http 请求数量，但是体积会变大）
module.exports = {module: {rules: [{test: /\.(png|jpg|jpeg|gif|PNG)$/,type: 'asset/inline'}]}
};
asset
module.exports = {module: {output: {// ...// 指定 assetModule 文件的输出目录，同时重命名输出的文件名称// assetModuleFilename: 'images/[hash:8][ext][query]'},rules: [{test: /\.(png|jpeg|gif|PNG)$/,type: 'asset',parser: {// 自定义转 base64 的界限dataUrlCondition: {// 小于 10kb 的图片转 base64maxSize: 10 * 1024 // 10kb}},generator: {// 跟 assetModuleFilename 之中选一个即可// 输出图片的名称filename: 'images/[hash:8][ext][query]'}}]}
};
打包字体图标资源
module.exports = {module: {output: {// ...// 指定图片文件的输出目录，同时重命名输出的文件名称// assetModuleFilename: 'fonts/[hash:8][ext][query]'},rules: [{test: /\.(ttf|otf|woff2?)$/,type: 'asset',generator: {// 跟 assetModuleFilename 之中选一个即可// 输出文件的名称filename: 'fonts/[hash:8][ext][query]'}}]}
};
打包其他资源
module.exports = {module: {output: {// ...// 指定图片文件的输出目录，同时重命名输出的文件名称// assetModuleFilename: 'media/[hash:8][ext][query]'},rules: [{test: /\.(mp3|mp4|avi|excel)$/,type: 'asset',generator: {// 跟 assetModuleFilename 之中选一个即可// 输出文件的名称filename: 'media/[hash:8][ext][query]'}}]}
};

js 兼容性处理

因为不是所有浏览器都能识别 es6 语法，所以需要通过 babel 进行转换，将 es6 语法转换成所有浏览器都可以识别的 es5 语法。

使用最新版本 babel

最新版本 babel 已支持转换 generator 函数，以及最新的 es6 语法。

安装 babel-loader、@babel/core、@babel/preset-env：

yarn add babel-loader @babel/core @babel/preset-env -D

module.exports = {module: {rules: [{test: /\.js$/,loader: 'babel-loader',exclude: /mode_modules/}]}
};

// 新建 .babelrc 文件
{"presets": ["@babel/preset-env"],"plugins": []
}
转换 jsx 语法
  • 使用 @babel/preset-react
  • 或者使用 @babel/preset-env 、 @babel/react

方法一：安装 @babel/preset-env 、 @babel/react

{presets: ['@babel/preset-env','@babel/react'],plugins: []
}

方法二：安装 @babel/preset-react

{presets: ['@babel/preset-react'],plugins: []
}
使用低版本 babel
转换基本语法

安装 babel-loader、@babel/core、@babel/preset-env

module.exports = {module: {rules: [{test: /\.js$/,loader: 'babel-loader',exclude: /mode_modules/,// 第一种配置，在这里通过 options 配置预设options: {// 预设：指示babel做什么样的兼容性处理presets: '@babel/preset-env'}}]}
};

// 第二种配置：新建 .babelrc 文件
{"presets": ["@babel/preset-env"],"plugins": []
}
  • @babel/preset-env 不能转换所有的 es6 语法（比如 async await 、generator 函数），只能转换基本语法；
  • 最新版本的已支持，如要测试请使用低版本 babel。
@babel/pollyfill

  • @babel/pollyfill 相当于 babel 的补丁，使用 @babel/pollyfill 可以转换所有语法。

  • @babel/pollyfill 是 core-js 和 generator 的集合（推荐单独安装 core-js 和 generator ，因为@babel/pollyfill 会污染全局变量）

  • @babel/pollyfill 在 babel 7.4.0 以后已被弃用，如果想测试，需要安装低版本 babel 测试。

  • 引入 @babel/pollyfill 可以做 js 全部兼容性处理

  • 会将所有的兼容性代码全部引入，体积太大，而且会污染全局变量

// 在需要处理的文件中通过 import 引入
import '@babel/pollyfill';
按需加载
  • 使用 core-js 可以解决 @babel/pollyfill 全部引入，导致体积太大的问题。
  • core-js 和 @babel/pollyfill 不能同时使用，只安装一个即可， @babel/pollyfill 内置有 core-js。

安装 core-js

// .babelrc
{"presets": [["@babel/preset-env",{// 按需加载"useBuiltIns": "usage",// 指定 core-js 版本"corejs": 3}]],"plugins": []
}
babel-runtime
  • babel-runtime 可以解决 @babel/pollyfill 污染全局变量的问题。

安装 @babel/plugin-transform-runtime、@babel/runtime

yarn add @babel/plugin-transform-runtime -D
yarn add @babel/runtime --save

// .babelrc
{"presets": [["@babel/preset-env",{// 按需加载"useBuiltIns": "usage",// 指定 core-js 版本"corejs": 3}]],"plugins": [["@babel/plugin-transform-runtime",{"absoluteRuntime": false,"corejs": 3,"helpers": true,"regenerator": true,"useESModules": false}]]
}

eslint 语法检查

安装 eslint、eslint-webpack-plugin

yarn add eslint eslint-webpack-plugin -D

const EslintPlugin = require("eslint-webpack-plugin");module.exports = {plugins: [new EslintPlugin({context: path.resolve(__dirname, 'src'), // 需要检测的根目录exclude: 'node_modules', // 需要排除的目录extensions: ['js'], // 需要检查的文件类型fix: true // 自动修复})]
};

eslint 规则配置 参考 https://eslint.cn/docs/rules/

// .eslintrc.js
module.exports = {root: true,env: {browser: true,node: true},extends: ['eslint:recommended'],rules: {'no-console': ['warn', { allow: ['warn', 'error'] }],'block-spacing': [2, 'always'],'brace-style': [2, '1tbs', { allowSingleLine: true }],'jsx-quotes': [2, 'prefer-single'],quotes: [2,'single',{avoidEscape: true,allowTemplateLiterals: true}],'semi-spacing': [2,{before: false,after: true}],'space-in-parens': [2, 'never'],'space-infix-ops': 'error','space-unary-ops': 'error',indent: 0,semi: 'error','comma-spacing': 0,'space-before-blocks': 0,'keyword-spacing': 0,'key-spacing': ['error', { afterColon: true }],'no-multiple-empty-lines': 0,'spaced-comment': ['error','always',{line: {markers: ['/'],exceptions: ['-', '+']},block: {markers: ['!'],exceptions: ['*'],balanced: true}}],'space-before-function-paren': 0,'arrow-spacing': 'error','object-curly-spacing': 0,'one-var-declaration-per-line': ['error', 'always'],'array-bracket-newline': ['error', 'consistent'],'no-lonely-if': 'error','object-curly-newline': ['error',{ObjectPattern: { multiline: true },ImportDeclaration: { multiline: true },ExportDeclaration: { multiline: true }}],'object-property-newline': ['error', { allowAllPropertiesOnSameLine: false }],'padding-line-between-statements': ['error',{blankLine: 'always',prev: ['const', 'let', 'var'],next: '*'},{blankLine: 'any',prev: ['const', 'let', 'var'],next: ['const', 'let', 'var']}],'semi-style': ['error', 'last'],'switch-colon-spacing': 'error','wrap-regex': 'error','default-case': 'error','guard-for-in': 'error','no-else-return': 'error','no-empty-function': 'error','no-new-func': 'error','no-useless-return': 'error','symbol-description': 'error','array-element-newline': ['error', 'consistent', { multiline: true }],'no-var': 'error','one-var': ['error', 'consecutive'],'no-case-declarations': 0}
};

// .eslintignore
// 需要忽略 eslint 检查的文件/.idea/*
/node_modules/*
/.eslintrc.js
static/fonts/*
/yarn.lock
/yarn-error.log
/.gitignore
airbnb 规则

使用 airbnb 规则：如果不想自己一个个配置 eslint rules, 推荐使用 airbnb 规则，需要用 eslint-config-airbnb-base 库。

yarn add eslint eslint-config-airbnb-base eslint-plugin-import -D

// 还需要在 package.json 中配置
{"eslintConfig": {"extends": "airbnb-base"}
}
@babel/eslint-parser

使用 @babel/eslint-parser 可以帮助你在使用 Babel 转换代码时，避免 ESLint 中的语法错误。同时，它也可以在您的代码中使用一些 Babel 特有的语法（如 jsx 和 decorators）时，帮助 ESLint 正确解析和检查代码。

安装 eslint、@babel/core、@babe:/eslint-parser

yarn add eslint @babel/eslint-parser -D
yarn add @babel/core --save

module.exports = {root: true,env: {browser: true,node: true},extends: ['eslint:recommended'],parserOptions: {parser: '@babel/eslint-parser',sourceType: 'module',ecmaVersion: 6,ecmaFeatures: {jsx: true,experimentalObjectRestSpread: true}},rules: {// ...},
};

常用插件

生成 html 文件

安装 html-webpack-plugin

yarn add html-webpack-plugin
  • html-webpack-plugin 默认会创建一个没有任何结构样式的 html 文件，会自动引入打包输出的所有资源。
    但是我们需要有结构的 html 文件，所以需要再配置 options。
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');// 不传参数，默认生成一个 index.html 文件，并且将打包后输出的所有资源插入 index.html 中
module.exports = {plugins: [new HtmlWebpackPlugin()]
};

// 传参数
const path = require('path');module.exports = {plugins: [new HtmlWebpackPlugin({// 指定要生成的 html 模板文件，生成的 index.html 内容跟 /src/index.html 相同，并且会自动引入打包后输出的所有资源template: path.resovle(__dirname, 'src/index.html'),filename: 'other.html' // 指定生成的 html 文件名})]
};

提取 css 为单独文件

安装 mini-css-extract-plugin

yarn add mini-css-extract-plugin
  • 使用 mini-css-extract-plugin 可以将打包后的 css 文件以 link 的方式插入 html 中
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {module: {rules: [{test: /\.css$/,use: [// 将 style-loader 换成 MiniCssExtractPlugin 内置的loader// 从而将提取出的 css 文件以 link 的方式插入 html 中MiniCssExtractPlugin.loader,'css-loader','postcss-loader']}]},plugins: [// 默认输出到 output 指定目录下，和 js 平级，main.cssnew MiniCssExtractPlugin({// 可以通过参数指定打包后的路径和文件名，输出为 output 指定目录下的 /css/style.cssfilename: 'css/style.css'})]
};

在这里插入图片描述

压缩 js

  • mode: 'production' 自动压缩 js
  • mode: 'development' 设置 minimize: true 可压缩
module.exports = {mode: 'production',
};

module.exports = {mode: 'development',optimization: {minimize: true}
};
  • 如果使用了 css-minimizer-webpack-plugin 压缩 css，那么 js 压缩会失效，需要手动安装 terser-webpack-plugin 插件
yarn add terser-webpack-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");module.exports = {mode: 'development',module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader']}]},optimization: {minimize: true,minimizer: [// 压缩 js：解决压缩 css 导致压缩 js 失效的问题new TerserWebpackPlugin(),// 压缩 cssnew CssMinimizerWebpackPlugin(),],},plugins: [new MiniCssExtractPlugin({filename: 'css/style.css'})]
};

压缩 css

安装 css-minimizer-webpack-plugin

yarn add css-minimizer-webpack-plugin
  • css-minimizer-webpack-plugin 必须要配合 mini-css-extract-plugin 使用，只能对单独的 css 文件进行压缩；
  • 只在 mode: 'production‘ 有效；
  • 如果希望在 mode: 'developmemt‘ 有效，需要设置 minimize: true
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");module.exports = {mode: 'production',module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader']}]},optimization: {minimizer: [// 压缩 cssnew CssMinimizerWebpackPlugin(),],},plugins: [new MiniCssExtractPlugin({filename: 'css/style.css'})]
};

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");module.exports = {mode: 'development',module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader','postcss-loader']}]},optimization: {minimize: true,minimizer: [// 压缩 cssnew CssMinimizerWebpackPlugin(),],},plugins: [new MiniCssExtractPlugin({filename: 'css/style.css'})]
};

压缩 html 文件

html-webpack-plugin
module.exports = {plugins: [new HtmlWebpackPlugin({// 配置 minify 属性进行压缩minify: {collapseWhitespace: true, // 移除空行removeComments: true // 移除注释}})]
};
html-minimizer-webpack-plugin
const HtmlMinimizerWebpackPlugin = require("html-minimizer-webpack-plugin");module.exports = {mode: 'production',plugins: [// 压缩 htmlnew HtmlMinimizerWebpackPlugin()]
};

const HtmlMinimizerWebpackPlugin = require("html-minimizer-webpack-plugin");module.exports = {mode: 'development',optimization: {minimize: true},plugins: [// 压缩 htmlnew HtmlMinimizerWebpackPlugin()]
};

其他插件

copy-webpack-plugin
yarn add copy-webpack-plugin
  • 拷贝文件：而是用来复制源代码中已经存在的文件（比如一些静态资源），拷贝到指定的地方去；并不是用来复制打包生成的文件。
  • 比如有一些全局的配置，直接拷贝到目标文件夹下去，后续这些全局配置文件内容有改变，就不需要重新打包，可以直接替换部署的文件
const CopyPlugin = require("copy-webpack-plugin");module.exports = {plugins: [new CopyPlugin({patterns: [{ from: path.resolve(__dirname, "src", "static"), to: "public" }]})]
};

在这里插入图片描述

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

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

相关文章

变压器消谐电阻器测试仪

变压器消谐电阻器测试仪

产品概述 KDZD3000X消谐电阻器参数测试仪能实现自动检测消谐器在电流峰值为0.3mA、0.5mA 、1mA 、3mA 、5mA、10mA时相对应的电压峰值或有效值&#xff0c;并能自动绘制出消谐器伏安特性曲线图。 仪器依据的标准 Q/GDW415-2010《电磁式电压互感器用非线性电阻性消谐器技术规…
阅读更多...
畅聊未来：低代码打造在线聊天系统

畅聊未来：低代码打造在线聊天系统

前言 现代社交网络的普及使得在线聊天成为人们日常生活中不可或缺的一部分。然而&#xff0c;传统的开发方式往往复杂且耗时&#xff0c;因此寻找一种更快捷、灵活且可视化的方法来构建在线聊天系统变得尤为重要。本文将介绍如何利用低代码平台来快速搭建一个功能齐全的在线聊…
阅读更多...
存内计算引领新一代技术革新，开启算力新时代

存内计算引领新一代技术革新，开启算力新时代

文章目录 存内计算与传统计算的区别 存内计算与传统计算的区别 存内计算芯片的优势 存内计算在各个领域的应用 存内计算技术对未来发展的影响 CSDN存内计算开发者社区&#xff1a;引领新一代技术革新的最前沿 社区内容专业度 社区具备的资源 社区的开放性 社区招募令…
阅读更多...
JVM篇----第三篇

JVM篇----第三篇

系列文章目录 文章目录 系列文章目录前言一、解释 Java 堆空间及 GC？二、JVM 内存区域三、程序计数器(线程私有)前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。 一…
阅读更多...
Intel NUC x15电池独立显卡功耗异常解决办法

Intel NUC x15电池独立显卡功耗异常解决办法

买了Intel NUC x15&#xff0c;所有驱动都是安装的官方的驱动&#xff0c;但是电池续航一直尿崩。经过查找资料&#xff0c;发现是独立显卡功耗异常导致&#xff0c;也有用户给出了解决办法&#xff0c;参考NUC X15 显卡待机功耗异常解决方案 - 哔哩哔哩 (bilibili.com)。https…
阅读更多...
canvas绘制美国国旗（USA Flag）

canvas绘制美国国旗（USA Flag）

查看专栏目录 canvas实例应用100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…
阅读更多...
8 容器化微服务

8 容器化微服务

文章目录 DockerSpring Boot和Buildpacks在Docker中运行系统Docker化微服务Docker化前端Docker化配置导入器Docker Compose使用Docker扩展系统共享Docker镜像小结 前面的文章&#xff1a; 1、1 一个测试驱动的Spring Boot应用程序开发 2、2 使用React构造前端应用 3、3 试驱动的…
阅读更多...
通信入门系列——复变函数

通信入门系列——复变函数

本节目录 一、复变函数 1、复数 2、复数的四则运算 二、复指数函数 三、欧拉公式本节内容 一、复变函数 1、复数 复数单位i&#xff0c;也就是满足i^2-1&#xff0c;将zxiy表示为复数z&#xff0c;x和y为任意的实数&#xff0c;称为复数z的实部和虚部。由复数zxiy对应的点(x,y…
阅读更多...
虚拟歌姬学习：DiffSinger，让GitHub下载快的方法！

虚拟歌姬学习：DiffSinger，让GitHub下载快的方法！

《三分钟上手DiffSinger》系列 ——基础篇https://www.bilibili.com/video/BV1ug4y1S7Dk/?spm_id_from333.337.search-card.all.click&vd_source124076d7d88eee393a1d8bf6fc787efa 下载DiffSinger 建议用edge浏览器还有steam&#xff0c;有时只是慢&#xff0c;但是还是…
阅读更多...
# 安徽锐锋科技IDMS系统简介

# 安徽锐锋科技IDMS系统简介

IDMS 由安徽锐锋科技独立开发 该系统负责和海算以及UE\UNITY的无缝衔接并具备远程数据库访问、高速数据库的自动创建及数据存储、支持MQTT等多种物联网接口&#xff0c;支持多种算法。主要完成由于物料、人员、生产、故障、不良异常、订单异常带来的生产损失&#xff0c;通过海…
阅读更多...
macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例 一&#xff1a; 简介 Socket 是 网络传输的抽象概念。 一般我们常用的有Tcp Socket和 UDP Scoket&#xff0c; 和类Unix 系统&#xff08;包括Mac&#xff09;独有的 Unix Domain Socket&#xff08;UDS&#xff09;。 Tcp Socket 能够…
阅读更多...
web安全学习笔记【05】——反弹Shell、正反向连接

web安全学习笔记【05】——反弹Shell、正反向连接

思维导图 #知识点&#xff1a; 1、Web常规-系统&中间件&数据库&源码等 2、Web其他-前后端&软件&Docker&分配站等 3、Web拓展-CDN&WAF&OSS&反向&负载均衡等 ----------------------------------- 1、APP架构-封装&原生态&H5&am…
阅读更多...
解决TCP粘包问题

解决TCP粘包问题

粘包问题已经在上一篇博客中写到具体可以看----------- 以下是利用分包解决粘包问题的步骤&#xff1a; 消息长度前缀&#xff1a; 在每个数据包前加入消息长度信息。 定义协议格式&#xff1a; 明确定义通信协议的格式&#xff0c;包括消息头和消息体。 封包&#xff1a; 将…
阅读更多...
Java研学-代理模式

Java研学-代理模式

一 概述 1 分类 静态代理&#xff1a;在程序运行前就已经存在代理类的字节码文件&#xff0c;代理对象和真实对象的关系在运行前就确定了。&#xff08;代理类及对象要自行创建&#xff09;   动态代理&#xff1a;代理类是在程序运行期间由 JVM 通过反射等机制动态的生成的…
阅读更多...
电脑数据恢复软件哪个有效好用?十大电脑数据恢复软件排行

电脑数据恢复软件哪个有效好用?十大电脑数据恢复软件排行

在数字时代&#xff0c;数据就是一切。从珍贵的家庭照片和重要的工作文档到最喜欢的音乐和电影&#xff0c;我们的生活越来越多地存储在各种设备上。系统崩溃、意外删除或恶意病毒都可能使您的宝贵数据瞬间消失。这就是数据恢复工具的用武之地。 十大电脑数据恢复软件排行 这些…
阅读更多...
Integer.valueOf方法详解

Integer.valueOf方法详解

Integer.valueOf 是 Java 中 Integer 类的一个静态方法&#xff0c;它用于将给定的字符串或基本数据类型转换成一个 Integer 对象。 使用场景 从字符串转换&#xff1a;将字符串形式的数字转换为 Integer 对象。 Integer num Integer.valueOf("123");从基本数据类…
阅读更多...
论文阅读2---多线激光lidar内参标定原理

论文阅读2---多线激光lidar内参标定原理

前言&#xff1a;该论文介绍多线激光lidar的标定内参的原理&#xff0c;有兴趣的&#xff0c;可研读原论文。 1、标定参数 rotCorrection&#xff1a;旋转修正角&#xff0c;每束激光的方位角偏移&#xff08;与当前旋转角度的偏移&#xff0c;正值表示激光束逆时针旋转&…
阅读更多...
关于一个QT程序的简单破解思路(不需要分析信号和槽的方法,通用所有程序的破解思路)

关于一个QT程序的简单破解思路(不需要分析信号和槽的方法,通用所有程序的破解思路)

几年前,公司买了台国产贴片机,里面的主程序是QT编写,运行在WINDOW XP系统上。主程序打开的界面,如图: 我来简单介绍下程序界面,各位读者不需要搞明白功能,只要知道大体的流程即可。 分析主界面: 一、左边的列表&#xff1a; 贴片生产文件,里面包括了贴片时元器件的坐标、飞达…
阅读更多...
C#winform上位机开发学习笔记11-串口助手接收数据用波形显示功能添加

C#winform上位机开发学习笔记11-串口助手接收数据用波形显示功能添加

1.功能描述 接收串口数据&#xff0c;并将收到的十六进制数据用坐标系的方式将数据波形展示出来 2.代码部分 步骤1&#xff1a;定义链表&#xff0c;用于数据保存 //数据结构-线性链表private List<byte> DataList new List<byte>(); 步骤2&#xff1a;定义波…
阅读更多...
shell脚本2

shell脚本2

在自定义变量当中&#xff0c;不可以以数字开头 变量追加值 在变量名后要写的东西 read -p &#xff1a;交互式输入变量值&#xff0c;然后使用变量 自定义变量 export 全局变量 如果想要bash里面的所有进程都能看见变量&#xff0c;加入export 父进程 子进程…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023