Webpack5 基本使用 - 2

news2024/11/23 16:59:36

常用 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 的图片转 base64
						maxSize: 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.css
		new MiniCssExtractPlugin({
			// 可以通过参数指定打包后的路径和文件名，输出为 output 指定目录下的 /css/style.css
			filename: '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(),
            // 压缩 css
            new 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: [
            // 压缩 css
            new 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: [
            // 压缩 css
            new 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: [
		// 压缩 html
        new HtmlMinimizerWebpackPlugin()
	]
};

const HtmlMinimizerWebpackPlugin = require("html-minimizer-webpack-plugin");

module.exports = {
	mode: 'development',
	optimization: {
		minimize: true
    },
	plugins: [
		// 压缩 html
        new 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.coloradmin.cn/o/1406551.html

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

相关文章

数据采集与预处理01： 项目1 数据采集与预处理准备

数据采集与预处理01： 项目1 数据采集与预处理准备

数据采集与预处理01&#xff1a; 项目1 数据采集与预处理准备 任务1 认识数据采集技术&#xff0c;熟悉数据采集平台 数据采集&#xff1a;足够的数据量是企业大数据战略建设的基础&#xff0c;因此数据采集成为大数据分析的前站。数据采集是大数据价值挖掘中重要的一环&#…
阅读更多...
《WebKit 技术内幕》学习之十二（2）：安全机制

《WebKit 技术内幕》学习之十二（2）：安全机制

2　沙箱模型 2.1　原理 一般而言&#xff0c;对于网络上的网页中的JavaScript代码和插件是不受信的&#xff08;除非是经过认证的网站&#xff09;&#xff0c;特别是一些故意设计侵入浏览器运行的主机代码更是非常危险&#xff0c;通过一些手段或者浏览器中的漏洞&#xff0c…
阅读更多...
在SpringBoot中基于CanvasLabel的地震基础信息展示实践

在SpringBoot中基于CanvasLabel的地震基础信息展示实践

目录 前言 一、数据库设计 1、数据库设计 2、sql脚本 3、数据记录 二、SpringBoot后台设计与实现 1、Mapper访问层及实体定义 2、Service层实现 3、控制层实现 三、地震信息展示 1、展示数据接入 2、最终效果 总结 前言 在上一篇博客中&#xff0c;对于在Leafle…
阅读更多...
自然语言处理--基于HMM+维特比算法的词性标注

自然语言处理--基于HMM+维特比算法的词性标注

自然语言处理作业2--基于HMM维特比算法的词性标注 一、理论描述 词性标注是一种自然语言处理技术&#xff0c;用于识别文本中每个词的词性&#xff0c;例如名词、动词、形容词等&#xff1b; 词性标注也被称为语法标注或词类消疑&#xff0c;是语料库语言学中将语料库内单词…
阅读更多...
mockjs使用（2）

mockjs使用（2）

mockjs使用&#xff08;1&#xff09; 4、Mock 4.1 Mock.mock() 根据数据模版生成模拟数据 Mock.mock( rurl?, rtype?, template|function(options) )问号代表该参数不必填 4.1.1 各参数及其默认值 rurl: 不必填。表示需要拦截的URL&#xff0c;可以使URL字符串或URL正…
阅读更多...
解决方案 | 基于SFTP协议的文件传输断点续传Java实现方案

解决方案 | 基于SFTP协议的文件传输断点续传Java实现方案

背景 因项目需要&#xff0c;我们服务每天都需要通过SFTP协议来对接上下游进行文件传输&#xff0c;但是对于一些大文件&#xff0c;在与第三方公司的服务器对接过程中很可能会因为网络问题或上下游服务器性能问题导致文件上传或者下载被中断&#xff0c;每次重试都需要重新对…
阅读更多...
【Python进阶编程】python编程高手常用的设计模式（持续更新中）

【Python进阶编程】python编程高手常用的设计模式（持续更新中）

Python编程高手通常熟练运用各种设计模式&#xff0c;这些设计模式有助于提高代码的可维护性、可扩展性和重用性。 以下是一些Python编程高手常用的设计模式&#xff1a; 1.单例模式&#xff08;Singleton Pattern&#xff09; 确保一个类只有一个实例&#xff0c;并提供全局…
阅读更多...
PLC协议转BACnet网关BA107

PLC协议转BACnet网关BA107

随着通讯技术和控制技术的发展&#xff0c;为了实现楼宇的高效、智能化管理&#xff0c;集中监控管理已成为楼宇智能管理发展的必然趋势。在此背景下&#xff0c;高性能的楼宇暖通数据传输解决方案——协议转换网关应运而生&#xff0c;广泛应用于楼宇自控和暖通空调系统应用中…
阅读更多...
静态分析C语言生成函数调用关系的利器——cflow（二）

静态分析C语言生成函数调用关系的利器——cflow（二）

大纲 环境准备选择项目分析代码简单分析高级分析坑&#xff1a;不能显示main函数所有调用函数的调用栈坑2&#xff1a;重定义错误坑3&#xff1a;缺失编译时产生的文件坑4&#xff1a;缺失工程的头文件包含路径指定坑5&#xff1a;操作系统的坑只存在于windows操作系统上的文件…
阅读更多...
大型语言模型 (LLM)全解读

大型语言模型 (LLM)全解读

一、大型语言模型&#xff08;Large Language Model&#xff09;定义 大型语言模型 是一种深度学习算法&#xff0c;可以执行各种自然语言处理 (NLP) 任务。 大型语言模型底层使用多个转换器模型&#xff0c; 底层转换器是一组神经网络。 大型语言模型是使用海量数据集进行训练…
阅读更多...
服务器数据恢复—EVA存储raid5硬盘离线的数据恢复案例

服务器数据恢复—EVA存储raid5硬盘离线的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌EVA某型号存储&#xff0c;底层是RAID5阵列&#xff0c;划分了若干lun。 服务器故障&分析&#xff1a; 该存储设备中raid5阵列有两块硬盘掉线&#xff0c;存储中的lun丢失。 将故障服务器存储中的所有磁盘编号后取出&#xff0c;硬件…
阅读更多...
web安全思维导图(白帽子)

web安全思维导图(白帽子)

web安全思维导图(白帽子) 客户端脚本安全 服务端应用安全 白帽子讲web安全 安全运营体系建设
阅读更多...
外网ssh远程连接服务器

外网ssh远程连接服务器

文章目录 外网ssh远程连接服务器一、前言二、配置流程1. 在服务器上安装[cpolar](https://www.cpolar.com/)客户端2. 查看版本号&#xff0c;有正常显示版本号即为安装成功3. token认证4. 简单穿透测试5. 向系统添加服务6. 启动cpolar服务7. 查看服务状态8. 登录后台&#xff0…
阅读更多...
Unity之Cinemachine教程

Unity之Cinemachine教程

前言 Cinemachine是Unity引擎的一个高级相机系统&#xff0c;旨在简化和改善游戏中的相机管理。Cinemachine提供了一组强大而灵活的工具&#xff0c;可用于创建令人印象深刻的视觉效果&#xff0c;使开发人员能够更轻松地掌控游戏中的摄像机行为。 主要功能和特性包括&#x…
阅读更多...
JAVA算法—排序

JAVA算法—排序

目录 *冒泡排序&#xff1a; *选择排序&#xff1a; 插入排序&#xff1a; 快速排序&#xff1a; 总结&#xff1a; 以下全部以升序为例 *冒泡排序&#xff1a; 引用&#xff1a; 在完成升序排序时&#xff0c;最大的元素会经过一轮轮的遍历逐渐被交换到数列的末尾&#…
阅读更多...
网络安全的使命：守护数字世界的稳定和信任

网络安全的使命：守护数字世界的稳定和信任

在数字化时代&#xff0c;网络安全的角色不仅仅是技术系统的守护者&#xff0c;更是数字社会的信任保卫者。网络安全的使命是保护、维护和巩固数字世界的稳定性、可靠性以及人们对互联网的信任。本文将深入探讨网络安全是如何履行这一使命的。 第一部分&#xff1a;信息资产的…
阅读更多...
Flink编程——最小程序MiniProgram

Flink编程——最小程序MiniProgram

最小程序MiniProgram 前面我们已经搭建起了Flink 的基础环境&#xff0c;这一节我们就在上一节的基础上&#xff0c;进行编写我们的第一个Flink 程序&#xff0c;开始之前我们先看一下一个完整的Flink 程序是什么样的 Flink 程序结构 为了演示Flink 程序结构&#xff0c;我们…
阅读更多...
【TEE论文】Confidential Serverless Made Efficient with Plug-In Enclaves （2021 ISCA）

【TEE论文】Confidential Serverless Made Efficient with Plug-In Enclaves （2021 ISCA）

Confidential Serverless Made Efficient with Plug-In Enclaves ipads.se.sjtu.edu.cn/chinasys21/vedios/Confidential Serverless Made Efficient with Plug-In Enclaves-李明煜.mp4 问题&#xff1a;在SGX飞地中运行现有的无服务器应用程序&#xff0c;并观察到性能下降可…
阅读更多...
【ASOC全解析（一）】ASOC架构简介和欲解决的问题

【ASOC全解析（一）】ASOC架构简介和欲解决的问题

【ASOC全解析&#xff08;一&#xff09;】ASOC架构简介和欲解决的问题 一、什么是ASOC以及ASOC解决的三个问题二、ASOC的组成与功能解决第一个问题解决第二个问题解决第三个问题 三、ASOC基本工作原理 /********************************************************************…
阅读更多...
使用Sobel算子把视频转换为只剩边缘部分

使用Sobel算子把视频转换为只剩边缘部分

效果展示 原始视频 修改后的视频 整体代码 import cv2vc cv2.VideoCapture(test.mp4)if vc.isOpened():open, frame vc.read() else:open Falsei 0 while open:ret, frame vc.read()if frame is None:breakif ret True:i 1# 转换为灰度图gray cv2.cvtColor(frame, cv…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023