当前位置： 首页 > news >正文

Webpact学习笔记记录

news 2025/7/8 5:54:37

Webpact学习笔记记录

  • 一.初始化项目
    • 1.生成package.json
    • 2.安装webpack
    • 3.执行webpack体验
  • 二、webpack的配置文件
  • 三、less-loader解析less
    • 1.安装loader
    • 2.配置
  • 四、eslint-loader语法检查
    • 1.安装loader
    • 2.配置loader
    • 3.在package.json中加入
  • 五、js语法转换
    • 1.安装loader
    • 2.配置loader
  • 六、js兼容性处理
    • 1. 第一种方法：使用polyfill
    • 2. 第二种方法：借助按需引入core-js
  • 七、url-loader解析样式中的图片
    • 1.安装loader
    • 2.配置loader
  • 八、打包html文件
    • 1.安装插件
    • 2.配置插件
  • 九、打包html中图片资源
    • 1.安装loader
    • 2.配置loader
    • 3.执行webpack命令即可
  • 十、打包其他资源
    • 1.使用file-loader处理即可，file-loader前面已经下载过
  • 十一、自动编译打包运行
    • 1.安装loader
    • 2.修改webpack配置
    • 3.package.json中修改如下
  • 十一、开启热模替换
  • 十二、devtool映射技术
  • 十三、清除打包文件目录
    • 1.安装插件
    • 2.配置与引用插件
  • 十四、提取css成单独的文件
    • 1.安装插件
    • 2.引入插件
    • 3.配置loader
  • 十五、css文件的兼容性处理
    • 1.安装
    • 2.配置
  • 十六、压缩css
    • 1.安装插件
    • 2.引入插件
    • 3.配置插件
  • 十七、压缩html
  • 十八、完整的package.json依赖如下

声明：以下笔记内容均摘自Webpack+react全家桶开发谷粒后台项目 ~张天禹老师的讲课视频，仅供学习使用

这个项目比较旧，因此以下的的安装都加上了版本号，以免新版本不兼容影响学习，如果不加上版本号会有不一样的表现，也可能出错~。

一.初始化项目

1.生成package.json

npm init

2.安装webpack

yarn add webpack@^4.41.2 webpack-cli@^3.3.10

3.执行webpack体验

webpack ./src/js/index.js -o ./dist/js/index.js --mode development

$ webpack ./src/js/index.js -o ./dist/js/index.js --mode development
asset main.js 6.53 KiB [emitted] (name: main)
runtime modules 670 bytes 3 modules
cacheable modules 1.09 KiB./src/js/index.js 446 bytes [built] [code generated]./src/js/module1.js 273 bytes [built] [code generated]./src/js/module2.js 109 bytes [built] [code generated]./src/js/module3.js 288 bytes [built] [code generated]
webpack 5.88.2 compiled successfully in 118 ms

二、webpack的配置文件

在webpack_test下建一个webpack.config.js

/*** 此文件是webpack的配置文件，用于指定webpack去执行哪些任务*/const resolve = require('path').resolve;module.exports = {// 指定入口文件entry: './src/js/index.js',// 指定输出文件output: {path: resolve(__dirname, 'dist'), // 输出文件的路径filename: 'js/index.js' // 输出文件的名称},// 模式mode: 'development' // development production 配置工作模式
};

直接执行命令webpack回车进行测试，使用配置文件进行构建

三、less-loader解析less

1.安装loader

yarn add css-loader@^3.2.0 style-loader@^1.0.1 less-loader@^5.0.0 less@^3.10.3

2.配置

    // 指定loader,loader是用于加载某些文件的module: {rules: [// 指定loader规则{test: /\.less$/, // 匹配所有的less文件use: [// 指定使用哪些loader'style-loader', // 用于将css代码，以style标签的形式添加到页面中'css-loader', // 用于将css文件加载到js中'less-loader' // 用于将less文件转为css文件]}]}

执行webpack测试

四、eslint-loader语法检查

对js基本语法错误进行提前检查

1.安装loader

yarn add eslint-loader@^4.0.2 eslint@^7.32.0

2.配置loader

webpack.config.js中加入以下

            // js语法检查{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夹loader: 'eslint-loader', // 指定使用的loaderenforce: 'pre', // 指定loader的执行顺序，pre表示优先执行options: { // 指定eslint-loader的配置// eslint options (if necessary)}}

3.在package.json中加入

  "eslintConfig": {"parserOptions": {"ecmaVersion": 6,"sourceType": "module"},"env": {"browser": true,"node": true},"globals": {"$": "readonly"},"rules": {"no-console": 0,"eqeqeq": 2,"no-alert": 2},"extends": "eslint:recommended"}

以上配置参考了https://blog.csdn.net/qq_41040989/article/details/128924218
“eslintConfig”: {
“parserOptions”: {
“ecmaVersion”: 6, // 支持es6
“sourceType”: “module” // 使用es6模块化
},
“env”: { // 设置环境
“browser”: true, // 支持浏览器环境： 能够使用window上的全局变量
“node”: true // 支持服务器环境: 能够使用node上global的全局变量
},
“globals”: { // 声明使用的全局变量, 这样即使没有定义也不会报错了
“$”: “readonly” // $ 只读变量
},
“rules”: { // eslint检查的规则 0 忽略 1 警告 2 错误
“no-console”: 0, // 不检查console
“eqeqeq”: 2, // 用而不用=就报错
“no-alert”: 2 // 不能使用alert
},
“extends”: “eslint:recommended” // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/
},

最后执行webpack测试

五、js语法转换

1.安装loader

yarn add babel-loader@^8.0.6 @babel/core@^7.7.2 @babel/preset-env@^7.7.1

2.配置loader

            // js语法转换{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夹use: {loader: 'babel-loader', // 指定使用的loaderoptions: { // 指定babel-loader的配置presets: ['@babel/preset-env']}}}

六、js兼容性处理

1. 第一种方法：使用polyfill

#安装
yarn add @babel/polyfill@^7.7.0

使用: 在App.js或index.js中引用

import '@babel/polyfill'; // 引入babel-polyfill，用于兼容ie浏览器

缺点：体积太大。

2. 第二种方法：借助按需引入core-js

安装：

yarn add core-js@^3.4.1

配置loader

            // js语法转换{test: /\.js$/,exclude: /node_modules/, // 排除node_modules文件夹use: {loader: 'babel-loader', // 指定使用的loaderoptions: { // 指定babel-loader的配置presets: [['@babel/preset-env',{useBuiltIns: 'usage', // 按需引入需要使用polyfillcorejs: { version: 3 }, // 指定core-js的版本targets: { // 指定兼容到哪个版本的浏览器chrome: '58',ie: '9',}}],],cacheDirectory: true // 开启babel缓存}}}

七、url-loader解析样式中的图片

1.安装loader

yarn add file-loader@^4.2.0 url-loader@^2.2.0

2.配置loader

            // 处理图片, url-loader,可以将图片转为base64处理{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader', // 指定使用的loaderoptions: {limit: 1024 * 10, // 8 * 1024 = 8kb 以下的图片会被base64处理outputPath: 'images', // 指定输出的目录publicPath: '../dist/images', // 指定图片的公共路径name: '[hash:5].[ext]' // 指定输出的文件名}}]}

八、打包html文件

html不再主动引入js了，由webpack自动打包引入
如需要将以下的<script src="../dist/js/index.js"></script>取消引入，然后由插件打包进去

<head><meta charset="UTF-8"><title>Webpack_test</title><script src="../dist/js/index.js"></script>
</head>

1.安装插件

yarn add html-webpack-plugin@^4.5.0

2.配置插件

	const HtmlWebpackPlugin = require('html-webpack-plugin');// 配置插件plugins: [// 用于将指定的html文件，移动到输出目录，并且自动引入打包后的js文件new HtmlWebpackPlugin({template: './src/index.html' // 指定要移动的html文件})]

九、打包html中图片资源

url-loader和file-loader只能处理js中的图片资源，要处理件中的图片资源，需要使用html-loader。

1.安装loader

yarn add html-loader@^0.5.5

2.配置loader

            // 处理html中的图片{test: /\.html$/,use: [{loader: 'html-loader', // 指定使用的loaderoptions: {esModule: false // 指定html-loader不使用es6模块化解析}}]}

3.执行webpack命令即可

十、打包其他资源

1.使用file-loader处理即可，file-loader前面已经下载过

            // 使用file-loader处理字体文件和其他文件{test: /\.(eot|svg|ttf|woff|woff2|mp3|mp3|avi)$/,loader: 'file-loader', // 指定使用的loaderoptions: {outputPath: 'media', // 指定输出的目录name: '[hash:5].[ext]' // 指定输出的文件名}}

十一、自动编译打包运行

1.安装loader

yarn add webpack-dev-server@^3.9.0

2.修改webpack配置

    // 配置开发服务器devServer: {compress: true, // 启动gzip压缩port: 3000, // 指定端口号open: true, // 自动打开浏览器}

3.package.json中修改如下

  "scripts": {"start": "webpack-dev-server",},

十一、开启热模替换

hot: true，package.json中增加此配置

    devServer: {compress: true, // 启动gzip压缩port: 3000, // 指定端口号open: true, // 自动打开浏览器hot: true, // 开启热更新}

入口配置修改如下

entry: ['./src/js/index.js', './src/index.html'],

十二、devtool映射技术

在webpack.config.js中加入以下配置即可

    devtool: 'cheap-module-eval-source-map' // 开发环境下使用// devtool: 'cheap-module-source-map' // 生产环境下使用

十三、清除打包文件目录

通过插件自动删除上一次的打包文件

1.安装插件

yarn add clean-webpack-plugin@^3.0.0

2.配置与引用插件

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

    // 配置插件plugins: [// 用于清除指定目录的文件new CleanWebpackPlugin()],

十四、提取css成单独的文件

1.安装插件

yarn add mini-css-extract-plugin@^0.8.0

2.引入插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 用于将css代码提取为单独的文件

3.配置loader

{test: /\.less$/, // 指定匹配的文件// 指定使用的loaderuse: [MiniCssExtractPlugin.loader,'css-loader', // 用于将css文件加载到js中'less-loader' // 用于将less文件转为css文件]}

十五、css文件的兼容性处理

1.安装

yarn add postcss-loader@^3.0.0 postcss-flexbugs-fixes@^4.1.0 postcss-preset-env@^6.7.0 postcss-normalize@^8.0.1

2.配置

{loader: 'postcss-loader', // 用于给css代码自动添加兼容性前缀options: {postcssOptions: {plugins: () => [require('postcss-flexbugs-fixs'),require('postcss-preset-env')({autoprefixer: {flexbox: 'no-2009'},stage: 3})],sourceMap: true}}},

在src目录下增加.browserslistrc文件：

# Browsers that we supportlast 1 version
> 1%
IE 10 # sorry

十六、压缩css

1.安装插件

yarn add optimize-css-assets-webpack-plugin@^5.0.3

2.引入插件

const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); // 用于压缩css代码

3.配置插件

// 用于压缩css代码new optimizeCssAssetsWebpackPlugin({cssProcessorPluginOptions: {presets: ['default', { discardComments: { removeAll: true } }]},cssProcessorOptions: {map: {inline: false, // 不生成内联映射，这样配置就会生成一个source-map文件annotation: true // 如果没有源映射，就会生成一个注释}}})

十七、压缩html

在插件HtmlWebpackPlugin中加入以下配置即可

new HtmlWebpackPlugin({template: './src/index.html', // 指定要移动的html文件minify: { // 配置html压缩removeComments: true, // 移除注释collapseWhitespace: true, // 移除空格removeRedundantAttributes: true, // 移除多余的属性useShortDoctype: true, // 使用短的文档声明removeEmptyAttributes: true, // 移除空的属性removeStyleLinkTypeAttributes: true, // 移除style和link标签的type属性keepClosingSlash: true, // 保留闭合斜线minifyJS: true, // 压缩内联js代码minifyCSS: true, // 压缩内联css代码minifyURLs: true, // 压缩内联的url}})

十八、完整的package.json依赖如下

  "dependencies": {"@babel/core": "7.7.2","@babel/polyfill": "7.7.0","@babel/preset-env": "7.7.1","babel-loader": "8.0.6","clean-webpack-plugin": "^3.0.0","core-js": "3.4.1","css-loader": "3.2.0","eslint": "7.32.0","eslint-loader": "4.0.2","file-loader": "4.2.0","html-loader": "0.5.5","html-webpack-plugin": "4.5.0","less": "3.10.3","less-loader": "5.0.0","mini-css-extract-plugin": "^0.8.0","optimize-css-assets-webpack-plugin": "^5.0.3","postcss-flexbugs-fixes": "^4.1.0","postcss-loader": "^3.0.0","postcss-normalize": "^8.0.1","postcss-preset-env": "^6.7.0","style-loader": "1.0.1","url-loader": "2.2.0","webpack": "4.41.2","webpack-cli": "3.3.10","webpack-dev-server": "3.9.0"}

相关文章：

Webpact学习笔记记录

Webpact学习笔记记录 一.初始化项目1.生成package.json2.安装webpack3.执行webpack体验 二、webpack的配置文件三、less-loader解析less1.安装loader2.配置 四、eslint-loader语法检查1.安装loader2.配置loader3.在package.json中加入 五、js语法转换1.安装loader2.配置loader …...

编程日记 2023/8/18 6:16:50

Python代码实现解析MULTIPOLYGON几何对象类型数据为嵌套列表

MULTIPOLYGON MULTIPOLYGON是一种地理信息系统&#xff08;GIS&#xff09;中的几何对象类型&#xff0c;用于表示由多个多边形组成的复杂地理区域。它是一种多边形的集合&#xff0c;每个多边形可以是简单的凸多边形或复杂的凹多边形。 MULTIPOLYGON类型的几何对象通常用于描…...

编程日记 2023/8/18 6:15:50

SSH连接工具汇总

xshell 这是个熟悉的软件啦&#xff0c;目前我正在使用Xshell_7 链接&#xff1a;https://www.xshell.com/zh/xshell/ FinalShell 国产软件&#xff0c;有windows和MAC版本&#xff1b;使用方便而且免费&#xff0c;但是软件比较占用内存。但是都2021年了&#xff0c;笔记本…...

编程日记 2023/8/18 6:14:48

Java的AQS框架是如何支撑起整个并发库的

如何设计一个抽象队列同步器 引言AQS需要解决哪些场景下的问题互斥模式获取锁抢锁失败入队 释放锁小总结 共享模式获取共享资源释放共享资源唤醒丢失问题 小总结 混合模式获取写锁释放写锁获取读锁读锁是否应该阻塞 释放读锁小总结 栅栏模式等待递减计数 条件变量模式等待条件成…...

编程日记 2023/8/18 6:13:47

一.net core 自动化发布到docker （Jenkins安装）

目录 1.安装Jenkins 参考资料:https://www.jenkins.io/doc/book/installing/docker/#downloading-and-running-jenkins-in-docker 1.Open up a terminal window.(打开一个终端窗口。) 2.Create a bridge network in Docker using the following docker network create comma…...

编程日记 2023/8/18 6:12:45

二刷LeetCode--148. 排序链表(C++版本),必会题，思维题

思路&#xff0c;本题其实考察了两个点&#xff1a;合并链表、链表切分。首先从1开始&#xff0c;将链表切成一段一段&#xff0c;因为需要使用归并&#xff0c;所以下一次的切分长度应该是当前切分长度的二倍&#xff0c;每次切分&#xff0c;我们拿出两段&#xff0c;然后将第…...

编程日记 2023/8/18 6:11:44

css flex 上下结构布局

display: flex; flex-flow: column; justify-content: space-between;...

编程日记 2023/8/18 6:10:43

win下qwidget全屏弹窗后其他窗口鼠标样式无法更新的问题

在win平台下&#xff0c;实现截取选桌面执行推理功能&#xff0c;用一个qwidget(j对象名为m_selectWidget)来显示选取范围的边框&#xff0c;但这个qwidget显示后&#xff0c;其他窗口在他下面可以接受鼠标相应的事件&#xff0c;但原来的鼠标形状功能失效&#xff08;mac正常&…...

编程日记 2023/8/18 6:09:41

Java【数据结构】二分查找

&#x1f31e; 题目&#xff1a; &#x1f30f;在有序数组A中&#xff0c;查找目标值target &#x1f30f;如果找到返回索引 &#x1f30f;如果找不到返回-1 算法描述解释前提给定一个内含n个元素的有序数组A&#xff0c;满足A0<A1<A2<<An-1,一个待查值target1设…...

编程日记 2023/8/18 6:08:39

数据库技术--数据库引擎，数据访问接口及其关系详解（附加形象的比喻）

目录 背景数据库引擎Jet数据库&#xff1a;ISAM&#xff1a;ODBC&#xff08;Open Database Connectivity&#xff09;&#xff1a; 数据访问接口ADO&#xff08;ActiveX Data Objects&#xff09;DAO&#xff08;Data Access Objects&#xff09;RDO&#xff08;Remote Data O…...

编程日记 2023/8/18 6:07:38

【BASH】回顾与知识点梳理（三十三）

【BASH】回顾与知识点梳理 三十三 三十三. 认识系统服务 (daemons)33.1 什么是 daemon 与服务 (service)早期 System V 的 init 管理行为中 daemon 的主要分类 (Optional)systemd 使用的 unit 分类systemd 的配置文件放置目录systemd 的 unit 类型分类说明 33.2 透过 systemctl…...

编程日记 2023/8/18 6:06:36

同步请求和异步请求

同步请求和异步请求是在网络编程中常用的两种通信模式&#xff0c;它们有以下区别&#xff1a; 同步请求&#xff1a; 在发送一个请求后&#xff0c;程序会一直等待服务器返回响应&#xff0c;期间无法进行其他操作。请求发出后&#xff0c;程序会阻塞在请求处&#xff0c;直…...

编程日记 2023/8/18 6:05:35

Transformer是什么，Transformer应用

目录 Transformer应用 Transformer是什么 Transformer应用:循环神经网络 语言翻译：注重语句前后顺序 RNN看中单个特征； CNN：看中特征之间时序性 模型关注不同位置的能力 Transformer是什么 Transformer是一个利用注意力机制来提高模型训练速度的模型。关于注意力机…...

编程日记 2023/8/18 6:04:33

故障011：dmap服务缺失libnsl.so修复

故障011&#xff1a;dmap服务缺失libnsl.so修复 1. 问题描述2. 解决方法2.1 初步分析2.2 动手实操2.2.1 模糊搜索大法2.2.2 僵桃代李大法 DM技术交流QQ群&#xff1a;940124259 1. 问题描述 今天遇二期XC环境&#xff0c;达梦DM 7.6的DmAPService备份辅助进程服务无法启动&a…...

编程日记 2023/8/18 6:03:33

第十三章 SpringBoot项目（总）

1.创建SpringBoot项目 1.1.设置编码 1.4.导入已有的spring boot项目 2.快速搭建Restfull风格的项目 2.1.返回字符串 RestController public class IndexController {RequestMapping("/demo1")public Object demo1() {System.out.println("demo1 ran...."…...

编程日记 2023/8/18 6:02:31

利用Python隧道爬虫ip轻松构建全局爬虫网络

嘿&#xff0c;爬虫程序员们&#xff01;你们有没有碰到过需要大规模数据爬取的情况&#xff1f;也许你们之前遇到过网站的反爬措施&#xff0c;卡住你们的进度。别担心&#xff0c;今天我来分享一个利用Python隧道爬虫ip实现的方法&#xff0c;帮助你们轻松搭建全局爬虫ip网络…...

编程日记 2023/8/18 6:01:30

Spring Clould 网关 - Gateway

视频地址&#xff1a;微服务&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; Gateway网关-网关作用介绍&#xff08;P35&#xff09; Spring Cloud Gateway 是 Spring Cloud 的一个全新项目&#xff0c;该项目是基于 Spring 5.0&#xff0c;Spring Boot 2…...

编程日记 2023/8/18 6:00:28

PHP使用phpmailer及SMTP服务实现邮件发送

博客升级中&#xff0c;把之前没有想到的功能一点点的完善。 这篇日志记录一下&#xff0c;使用phpmailer实现邮件发送的这样一个操作。 博客偶尔会有留言和评论&#xff0c;我也会及时回复&#xff0c;但是有一个问题&#xff0c;我回复了&#xff0c;给我留言的人如果不再次…...

编程日记 2023/8/18 5:59:27

交换实验一

题目 交换机上接口配置 SW1 interface GigabitEthernet0/0/1 port hybrid tagged vlan 2 port hybrid untagged vlan 3 to 6 interface Ethernet0/0/2 port hybrid pvid vlan 3 port hybrid untagged vlan 2 to 6 interface Ethernet0/0/3 port link-type access port d…...

编程日记 2023/8/18 5:58:26

计算机中丢失MSVCR120.dll，找不到MSVCR120.dll是什么意思？

当计算机中缺少MSVCR120.dll文件时&#xff0c;意味着缺少了Microsoft Visual C Redistributable文件的一个组件。MSVCR120.dll是Visual C Redistributable 2013的动态链接库文件&#xff0c;它是应用程序依赖的重要文件之一。缺少MSVCR120.dll文件可能会导致一些应用程序无法正…...

编程日记 2023/8/18 5:57:25

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/7/8 1:26:07

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/8 4:42:31

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/7/6 1:11:45

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/6/20 17:53:24

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/6/16 12:40:21

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/6/27 7:21:20

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/6/20 22:43:59

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/7/7 1:04:44

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/7/6 19:05:53

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/6/19 5:23:30