webpack基础配置

文章目录

  • 一、默认入口和默认出口
  • 二、资源配置
  • 三、输出文件
    • 3.1 多文件入口
    • 3.2 HtmlWebpackPlugin插件
  • 四、环境
    • 4.1 环境变量
    • 4.2 热更新
  • 五、代码分离
    • 5.1 公共模块
    • 5.2 懒加载
    • 5.3 预获取/预加载模块
  • 六、缓存
  • 七、Tree Shaking
  • 八、公共路径

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，在许多项目中都有应用，但是往往平台搭建以后很少去修改配置，熟悉基础配置可以更快的修复配置问题。

一、默认入口和默认出口

默认目录结构


webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js // 可以先不配置，最后一步再加
|- /dist|- index.html
|- /src|- index.js

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>起步</title></head><body>// 默认出口就是dist/main.js// 这里是直接指定，包括使用插件默认也是引入dist/main.js<script src="main.js"></script></body>
</html>

index.js

// 引入的包可以被识别的打包
import _ from "lodash";function component() {const element = document.createElement("div");// lodash 现在使用 import 引入element.innerHTML = _.join(["Hello", "webpack"], " ");return element;
}document.body.appendChild(component());

检查npm

// 检查npm registry
npm config get registry
// 改成淘宝源的新地址，下载包更快，不容易出错
npm config set registry https://registry.npmmirror.com
// npm 开发依赖;只会在开发环境需要，不会打包到dist中
// 也就是package.json中的devDependencies
// --save-dev 简写 -D
npm i package --save-dev // 示意，不用安装
// npm 生产依赖;会打包到dist中，影响包的大小和打包速度
// 也就是package.json中的dependencies
// --save 简写 -S
npm i package --save // 示意，不用安装

安装包

 npm init -y // y表示yes，跳过一步npm i webpack webpack-cli -Dnpm i lodash -S
  • 运行npx webpack 打包；
  • vscode安装插件Live Server，右键index.html启动Open with Live Server
  • 可以看到已经启动了页面
  • 增加webpack.config.js
  • path.resolve相关用法可以查看另一篇 path.resolve相关用法
  • 在package.json中script对象中加入一行 “build”: “webpack”（注意最后一行没有,号）
  • npm run build进行打包；发现打包后正常访问；
  • 之前没有webpack.config.js，也可以访问，也就是说这里的配置是webpack的默认打包配置
// webpack.config.js
const path = require("path");module.exports = {entry: "./src/index.js", // 入口output: { // 出口 // 输出文件filename: "main.js",// 注意这个dist是相对于文件夹根目录，也就是创建一个dist目录并且把输出文件放在里面path: path.resolve(__dirname, "dist"),},
};

二、资源配置

  • src下增加style.css, 引入index.js中，给dom添加上类名
// style.css
.red {color: red;font-size: 20px;
}// index.js
import _ from "lodash";
import "./style.css";function component() {const element = document.createElement("div");// lodash 现在使用 import 引入element.innerHTML = _.join(["Hello", "webpack"], " ");element.classList.add("red");return element;
}document.body.appendChild(component());
  • npm i style-loader css-loader -D 安装loader
  • webpack.config.js配置加上处理style的loader
const path = require("path");module.exports = {entry: "./src/index.js",output: {filename: "main.js",path: path.resolve(__dirname, "dist"),},module: {rules: [{// 正则，以.css文件结尾，$表示结尾，\表示转义test: /\.css$/,// 从右边的loader开始加载处理，返回结果给左边的继续处理use: ["style-loader", "css-loader"],},],},
};

图片资源

// .style.css
.red {color: red;font-size: 20px;height: 300px;background: url('./logo.png'); // 增加图片的使用
}
// webpack.config.js中module.rules添加一条
{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: 'asset/resource', // 这个type应该是webpack自带的插件进行处理
},

其他资源就不一一列举了，要么有默认处理插件，要么需要安装对应的插件再配置rules；比如csv表格、json文件、字体文件、ts文件

三、输出文件

3.1 多文件入口

增加/print.js，修改index.html、index.js、webpack.config.js

// src/print.js
export default function print(msg = "Hello World") {console.log(msg);
}
// index.html
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>起步</title>// index.html就在dist目录下，dist目录新增了两个出口文件print.js、index.js<script src="./print.js"></script></head><body><script src="./index.js"></script></body></html>
// index.js
import _ from "lodash";
import "./style.css";
import print from "./print";
function component() {const element = document.createElement("div");// lodash 现在使用 import 引入element.innerHTML = _.join(["Hello", "webpack"], " ");element.classList.add("red");const btn = document.createElement("button");btn.innerHTML = "click me";btn.onclick = print;element.appendChild(btn);return element;
}document.body.appendChild(component());
// webpack.config.js
const path = require("path");module.exports = {// 配置多个入口，那么就会产生多个出口文件; 多个入口文件都会在index.html中单独引入entry: {index: "./src/index.js",print: "./src/print.js",},output: {filename: "[name].js", // name表示动态文件名，entry中指定的keypath: path.resolve(__dirname, "dist"),},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},
};

重新打包，可以正常访问和点击按钮

3.2 HtmlWebpackPlugin插件

  • 帮助自动生成index.html文件（前面是手动引入出口文件），安装HtmlWebpackPlugin插件
  • npm i html-webpack-plugin -D
  • 修改webpack.config.js
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {entry: { index: "./src/index.js",print: "./src/print.js", // 注意这个顺序，index.html中的引入顺序也是如此},output: {// 增加contenthash值，是一个随机字符串filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),// 可能改造过配置文件，导致dist目录有之前构建的很多不需要文件，构建前清理一下dist目录clean: true, },module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],
};

四、环境

4.1 环境变量

  • 修改package.json；webpack.config.js；print.js
  • 通过命令行传入参数；通过mode选择打包模式；通过process.env.NODE_ENV获取当前打包环境
  • webpack.config.js中module.exports改造成匿名函数，以便获取参数
  • 增加source-map源代码映射
// package.json 
// 这一条改成这个 增加打包的参数；在env对象里增加goal: local, production: true
// --progress 是增加进步条；--color增加颜色；打包时间长的时候出现; 
"build": "webpack --env goal=local --env production --progress --color"// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");// 改造成匿名函数，这样可以获取参数
module.exports = (env, argv) => {// env中增加goal和production属性; env是argv中的一个属性console.log("env, argv", env, argv);return {// mode是指定模式，可以通过env参数来决定是什么模式mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {index: "./src/index.js",print: "./src/print.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],};
};
// print.js
export default function print(msg = "Hello World") {// 注意在一般文件中访问process或者process.env会报错，node只暴漏了process.env.NODE_ENV变量出来// process.env.NODE_ENV就是webpack.config.js中的mode属性console.log("process", process.env.NODE_ENV);
}

4.2 热更新

  • 之前手动build打包，还要在页面上刷新一下才能看到最新内容
  • 现在安装插件，npm i webpack-dev-server -D
// package.json scripts增加
// webpack-dev-server --open 和 webpack serve --open 都是可以的；出现错误可以都试一下；
"start-dev": "webpack-dev-server --open --env production=false",
"start": "webpack serve --open --env production=false",// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {print: "./src/print.js",index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {// runtimeChunk是模块关系文件，single表示这里打包成一个runtime名称的文件runtimeChunk: "single", },plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

五、代码分离

5.1 公共模块

  • index.js\print.js中都引入了lodash
  • 添加splitChunks让lodash单独打包成一个文件
// print.js
import _ from "lodash";
export default function print(msg = "Hello World") {console.log("process", process.env.NODE_ENV, 1111);console.log(_.join([1, 2, 3]));
}// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {print: "./src/print.js",index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {runtimeChunk: "single",// all 表示公共的依赖模块提取到各自的chunk中；// 比如两个文件里引入了lodash，那么lodash会被打包lodash的chunk中splitChunks: {chunks: "all",},},plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

5.2 懒加载

  • index.js改成动态引入print.js
  • import导入时加上/* webpackChunkName: “print” /，可以让这个文件单独打包，不会加载，等需要加载的时候才会请求资源；注意/ 之间的空格
index.js
import _ from "lodash";
import "./style.css";
// import print from "./print"; // 注释掉，使用动态导入 否则也不会单独打包function component() {const element = document.createElement("div");// lodash 现在使用 import 引入element.innerHTML = _.join(["Hello", "webpack"], " ");element.classList.add("red");const btn = document.createElement("button");btn.innerHTML = "click me";btn.onclick = (e) =>// import(/* webpackChunkName: "print" */ "./print").then((module) =>module.default());element.appendChild(btn);return element;
}document.body.appendChild(component());// webpack.config.js
// 用5.1配置就可以了

5.3 预获取/预加载模块

预获取，空闲时进行；加载将来需要的资源
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');
预加载，父 chunk 加载时以并行方式开始加载；加载当前路由下可能需要的资源
import(/* webpackPreload: true */ './path/to/LoginModal.js');

六、缓存

  • contenthash是文件名唯一标识，这样文件更新了，客户端就能进行资源重新请求和更新
  • 公共依赖包不会经常更新，所以对应的打包文件也不需要更新，把这些不需要经常更新的包进行缓存
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {// moduleIds 模块标识符，使模块更容易被缓存和重复使用；// 项目中新增和删除文件，导致解析顺序发生变化，会导致vendor包变化; 创建唯一模块标识符moduleIds: "deterministic",runtimeChunk: "single",// all 表示公共的依赖模块提取到各自的chunk中；// 比如两个文件里引入了lodash，那么lodash会被打包lodash的chunk中splitChunks: {chunks: "all",cacheGroups: {vendor: {// node_modules下的包都打包到vendors这个chunk中test: /[\\/]node_modules[\\/]/,name: "vendors",chunks: "all",},},},},plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

七、Tree Shaking

  • optimization.usedExports = true；移除未使用的代码
  • 如果引入了资源(函数funTest)，但是觉得可以不用打包他，他不会对结果有影响，可以设置标识；/#PURE/ funTest();
  • sideEffects表示该文件引入，但是未使用，需要确定这个文件有没有必要引入；在package.json中增加 “sideEffects”: [“./index.js”]，表示如果你在index.js中引入了另外一个文件，但是该文件内容没有使用，可以放心移除这个文件不必打包进index.js，index.js被标记为无副作用
// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {// moduleIds 模块标识符，使模块更容易被缓存和重复使用；// 项目中新增和删除文件，导致解析顺序发生变化，会导致vendor包变化; 创建唯一模块标识符moduleIds: "deterministic",runtimeChunk: "single",// all 表示公共的依赖模块提取到各自的chunk中；// 比如两个文件里引入了lodash，那么lodash会被打包lodash的chunk中splitChunks: {chunks: "all",cacheGroups: {vendor: {// node_modules下的包都打包到vendors这个chunk中test: /[\\/]node_modules[\\/]/,name: "vendors",chunks: "all",},},},// tree shaking// // 标记未使用的导出（代码级别），production模式下不会被打包进输出文件（代码体积会减少）usedExports: true, },plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

八、公共路径

  • 默认公共路径是从output.publicPath去引用
  • 可以通过webpack.DefinePlugin自己定义环境变量，在页面可以使用；没有定义就使用否则会报错（process not defined）
  • webpack_public_path = window.test_public_path，这一行单独放在一个文件里，在入口文件最上面引入，可以在运行时规定公共路径；注意在服务器上挂载环境变量配置，给变量赋值window.test_public_path
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");// 尝试使用环境变量，否则使用根路径; process.env.ASSET_PATH 默认值是undefined
const ASSET_PATH = process.env.ASSET_PATH || "/"; // 
console.log("ASSET_PATH", process.env.ASSET_PATH, ASSET_PATH);module.exports = (env, argv) => {console.log("env, argv", env, argv);return {mode: "development", // 开发模式 development // 默认是 production 生产模式// devtool 打包后的文件是压缩的不是源代码，报错了找不到错误位置，需要源代码映射devtool: "inline-source-map", // 开发模式是 inline-source-map // 生产模式是 source-mapentry: {index: "./src/index.js",},output: {filename: "[name].[contenthash].js",path: path.resolve(__dirname, "dist"),clean: true,publicPath: "/", // 解决静态资源加载路径问题},optimization: {// moduleIds 模块标识符，使模块更容易被缓存和重复使用；// 项目中新增和删除文件，导致解析顺序发生变化，会导致vendor包变化; 创建唯一模块标识符moduleIds: "deterministic",runtimeChunk: "single",// all 表示公共的依赖模块提取到各自的chunk中；// 比如两个文件里引入了lodash，那么lodash会被打包lodash的chunk中splitChunks: {chunks: "all",cacheGroups: {vendor: {// node_modules下的包都打包到vendors这个chunk中test: /[\\/]node_modules[\\/]/,name: "vendors",chunks: "all",},},},// tree shaking// 标记未使用的导出（代码级别），production模式下不会被打包进输出文件（代码体积会减少）usedExports: true, },plugins: [new HtmlWebpackPlugin({title: "Webpack Test",}),// 这可以帮助我们在代码中安全地使用环境变量// 让你可以自己定义一些变量，在代码中使用new webpack.DefinePlugin({"process.env.ASSET_PATH": JSON.stringify("ASSET_PATH"),}),],// 开发模式下开启热更新devServer: {static: "./dist", // 插件寻找启动文件hot: true, // 开启热更新open: true, // 自动打开浏览器port: 3000, // 端口号},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},{test: /\.(png|svg|jpg|jpeg|gif)$/i, // i表示不区分大小写type: "asset/resource", // 这个type应该是webpack自带的插件进行处理},],},};
};

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

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

相关文章

HarmonyOs鸿蒙开发实战(20)=＞一文学会基础使用组件导航Navigation

HarmonyOs鸿蒙开发实战(20)=＞一文学会基础使用组件导航Navigation

敲黑板&#xff0c;以下是重点技巧。文章末尾有实战项目效果截图及代码截图可参考 1.概要 Navigation是路由导航的根视图容器Navigation组件主要包含​导航页&#xff08;NavBar&#xff09;和子页&#xff08;NavDestination&#xff09;&#xff0c;导航页不存在页面栈中&am…
阅读更多...
tcpdump抓包 wireShark

tcpdump抓包 wireShark

TCPdump抓包工具介绍 TCPdump&#xff0c;全称dump the traffic on anetwork&#xff0c;是一个运行在linux平台可以根据使用者需求对网络上传输的数据包进行捕获的抓包工具。 tcpdump可以支持的功能: 1、在Linux平台将网络中传输的数据包全部捕获过来进行分析 2、支持网络层…
阅读更多...
已阻止加载“http://localhost:8086/xxx.js”的模块，它使用了不允许的 MIME 类型 (“text/plain”)。

已阻止加载“http://localhost:8086/xxx.js”的模块，它使用了不允许的 MIME 类型 (“text/plain”)。

记录今天解决的一个小bug 在终端启动8080端口号监听后&#xff0c;打开网址http://localhost:8080&#xff0c;发现不能正确加载页面&#xff0c;打开检查-控制台&#xff0c;出现如下警告&#xff1a;已阻止加载“http://localhost:8086/xxx.js”的模块&#xff0c;它使用了不…
阅读更多...
使用 helm 部署 gitlab

使用 helm 部署 gitlab

一、下载 Gitlab chart 进入 artifacthub 官网 选择你想要的版本&#xff08;我选择的chart版本是 8.4.0 , gitlab 版本是17.4.0 &#xff09; 进入到控制台&#xff0c;添加helm仓库 如果你想不改任何配置&#xff0c;你可以执行安装命令&#xff0c;等待安装即可helm instal…
阅读更多...
若依-一个请求中返回多个表的信息

若依-一个请求中返回多个表的信息

背景 主表是点位表关联子表 需要知道对应 合作商的信息关联子表 需要直到对应 区域的信息关联子表 需要直到对应 设备数量 实现的方案 关联实体相关的标签
阅读更多...
C++注释

C++注释

目录 1. 什么是注释 2. 语法 2.1 单行注释 2.2 多行注释 2.3 示例 3. 注释源代码的方法 3.1 使用多行注释 3.2 使用预处理器指令 #if #endif 3.3 使用条件判断语句 if (false) 4. 不能用宏定义&#xff0c;组成注释 5 // \ 会将源代码中的下一行也被当作注释中的一部…
阅读更多...
使用itextpdf进行pdf模版填充中文文本时部分字不显示问题

使用itextpdf进行pdf模版填充中文文本时部分字不显示问题

在网上找了很多种办法 都解决不了; 最后发现是文本域字体设置出了问题; 在这不展示其他的代码 只展示重要代码; 1 引入扩展包 <dependency><groupId>com.itextpdf</groupId><artifactId>itext-asian</artifactId><version>5.2.0</v…
阅读更多...
web——sqliabs靶场——第十三关——报错注入+布尔盲注

web——sqliabs靶场——第十三关——报错注入+布尔盲注

发现是单引号加括号闭合的 尝试联合注入 发现不太行&#xff0c;那尝试报错注入。 测试报错注入 unameadmin) and updatexml(1,0x7e,3) -- &passwdadmin&submitSubmit 爆数据库 unameadmin) and updatexml(1,concat(0x7e,database(),0x7e),3) -- &passwdadmin&a…
阅读更多...
QT如何共享文件+拷贝文件

QT如何共享文件+拷贝文件

QString sharedFolderPathImg "\\\\" IP "/profileImage/"; // 更换为你的共享文件夹路径QDir dirImg(sharedFolderPathImg);dirImg.setFilter(QDir::NoDotAndDotDot | QDir::AllEntries);QVector<QString> curFileEntryArrayImg dirImg.entryList…
阅读更多...
跟《经济学人》学英文：2024年11月23日这期 Why British MPs should vote for assisted dying

跟《经济学人》学英文：2024年11月23日这期 Why British MPs should vote for assisted dying

Why British MPs should vote for assisted dying A long-awaited liberal reform is in jeopardy in jeopardy&#xff1a;在危险中 jeopardy&#xff1a;美 [ˈdʒepərdi] 危险&#xff1b;危机&#xff1b;风险&#xff1b; 原文&#xff1a; THIS NEWSPAPER believes …
阅读更多...
【es6进阶】vue3中的数据劫持的最新实现方案的proxy的详解

【es6进阶】vue3中的数据劫持的最新实现方案的proxy的详解

vuejs中实现数据的劫持,v2中使用的是Object.defineProperty()来实现的&#xff0c;在大版本v3中彻底重写了这部分&#xff0c;使用了proxy这个数据代理的方式&#xff0c;来修复了v2中对数组和对象的劫持的遗留问题。 proxy是什么 Proxy 用于修改某些操作的默认行为&#xff0…
阅读更多...
D73【 python 接口自动化学习】- python 基础之正则表达式

D73【 python 接口自动化学习】- python 基础之正则表达式

day73 正则表达式-元字符匹配 学习日期&#xff1a;20241119 学习目标&#xff1a;正则表达式--133 正则表达式-元字符匹配 学习笔记&#xff1a; 元字符匹配 数量匹配 实践操作 总结 字符串的r标记表示&#xff0c;字符串内转移字符无效&#xff0c;作为普通字符使用正则…
阅读更多...
Python浪漫之画明亮的月亮

Python浪漫之画明亮的月亮

目录 1、效果展示 2、完整版代码 1、效果展示 2、完整版代码 import turtledef draw_moon():# 设置画布turtle.bgcolor("black") # 背景颜色为黑色turtle.speed(10) # 设置绘制速度# 绘制月亮的外圈turtle.penup()turtle.goto(0, -100) # 移动到起始…
阅读更多...
微信小程序包之加农炮游戏

微信小程序包之加农炮游戏

微信小程序 - 气球射击游戏 项目简介 这是一个简单有趣的微信小程序射击游戏。玩家通过控制屏幕底部的加农炮&#xff0c;射击从上方降落的蓝色气球。游戏考验玩家的反应能力和瞄准技巧。 游戏规则 点击屏幕任意位置发射炮弹大炮会自动对准点击位置击中气球获得10分如果气球触…
阅读更多...
autogen+ollama+litellm实现本地部署多代理智能体

autogen+ollama+litellm实现本地部署多代理智能体

autogen 是一个专门为大语言模型 (LLMs) 驱动的自治代理 (autonomous agents) 设计的 Python 库，由 Microsoft 开发和维护。它通过高度模块化和可扩展的架构，支持用户快速构建和运行多代理系统，这些代理可以在没有明确人类干预的情况下协作完成复杂任务。AutoGen 支持以最少…
阅读更多...
分公司如何纳税

分公司如何纳税

分公司不进行纳税由总公司汇总纳税“子公司具有法人资格&#xff0c;依法独立承担民事责任;分公司不具有法人资格&#xff0c;其民事责任由公司承担。”企业设立分支机构&#xff0c;使其不具有法人资格&#xff0c;且不实行独立核算&#xff0c;则可由总公司汇总缴纳企业所得税…
阅读更多...
HashMap源码详解

HashMap源码详解

提醒你一下&#xff0c;用电脑或者平板看&#xff0c;手机屏幕小&#xff0c;图片会看不清楚&#xff0c;源码不方便看 基础前置 看该篇文章之前先看看这篇基础文章 HashMap底层原理-CSDN博客 先来看HashMap里面的一些参数。 1.DEFAULT_INITIAL_CAPACITY 默认的数组初…
阅读更多...
09 —— Webpack搭建开发环境

09 —— Webpack搭建开发环境

搭建开发环境 —— 使用webpack-dev-server 启动Web服务&#xff0c;自动检测代码变化&#xff0c;有变化后会自动重新打包&#xff0c;热更新到网页&#xff08;代码变化后&#xff0c;直接替换变化的代码&#xff0c;自动更新网页&#xff0c;不用手动刷新网页&#xff09; …
阅读更多...
动态反馈控制器（DFC）和 服务率控制器（SRC）；服务率和到达率简单理解

动态反馈控制器（DFC）和 服务率控制器（SRC）；服务率和到达率简单理解

目录 服务率和到达率简单理解 服务率 到达率 排队论中的应用 论文解析：队列等待成本动态感知控制模型 动态反馈和队列等待成本意识： 服务速率调整算法： 动态反馈控制器（DFC）和 服务率控制器（SRC） SRC公式4的原理 算力资源分配系统中的调整消耗 举例说明 服务…
阅读更多...
九、FOC原理详解

九、FOC原理详解

1、FOC简介 FOC&#xff08;field-oriented control&#xff09;为磁场定向控制&#xff0c;又称为矢量控制&#xff08;vectorcontrol&#xff09;&#xff0c;是目前无刷直流电机&#xff08;BLDC&#xff09;和永磁同步电机&#xff08;PMSM&#xff09;高效控制的最佳选择…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023