前端构建工具 webpack 笔记

news2024/11/30 4:58:23

  • 1、了解 webpack 

1、定义：本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具，当 webpack 处理应用它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所程序时，需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

2、静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文件

3、打包：把静态模块内容，压缩，整合，转译等（前端工程化）

        1）把 less / sass 转成 css 代码

        2）把 ES6+ 降级成 ES5

        3）支持多种模块标准语法

4、问题：为何不学 vite ？

        因为：很多项目还是基于 Webpack 构建，并为 Vue React 脚手架使用做铺垫！

  • 2、使用 webpack

1、需求：封装 utils 包，校验手机号长度和验证码长度，在 src/index.js 中使用并打包观察

2、步骤：

        1）新建并初始化项目，编写业务源代码

1、创建包管理文件：package.json
    npm init -y

2、编写业务代码

        2）下载 webpack webpack-cli 到当前项目中（版本独立），并配置局部自定义命令

    Webpack是一个功能强大的模块打包工具，而Webpack-CLI则是用于在命令行中执行Webpack相关操作的工具。
    它们通常一起使用，以便更好地管理和构建前端项目。

1、终端：
    npm i webpack webpack-cli --save-dev

2、package.json:  [我们自定义一个命令 build，但是最终执行的是 webpack]
    "scripts": {
        "build":"webpack"
    }

        3）运行打包命令，自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

    执行我们定义的命令，即执行了 webpack ，进行打包
    npm run build

  • 3、修改 Webpack 打包出入口

webpack 官方文档：概念 | webpack 中文文档 (docschina.org) 

1）项目根目录，新建 webpack.config.js 配置文件

2）导出配置对象，配置入口，出口文件的路径

1、下面是引入 path 模块 ，path.resolve作用是，把下面 __dirname (可得到当前绝对路径) 和后面的字符串，拼接成一个绝对路径

2、entry：配置需要打包文件的文件路径

3、output：配置打包后文件的存储显示路径

        1）这里的path.resolve第二参数是打包后输出的文件夹名称

        2）filename：配置打包后的文件名

        3）clean: true  生成打包后内容之前，清空原有的输出目录【和filename同位置】

3）重新打包观察 注意：只有和入口产生直接/间接的引入关系，才会被打包

执行命令，npm run build，最后输出如下图框中

4）打包后的 js 文件，例子如下【我用了自动换行，让你们看清楚】

  • 4、webpack 打包输出 index.html 文件

注意：前面我们打包的都是 js 文件，那么 html 文件怎么打包到 dist 文件夹里面呢？

官方网址指向：HtmlWebpackPlugin | webpack 中文文档 (docschina.org)

1）安装对应的包

    npm install html-webpack-plugin --save-dev

2）在 webpack.config.js 中配置

3）重新打包观察

执行命令，npm run build，最后输出如下图框中

 4）打包后的 html 文件，例子如下【我用了自动换行，让你们看清楚】

  • 5、webpack 打包 css 代码 【js 文件中】

1、和 打包 html 文件一样，我们需要下载对应的包，用于 打包 该文件 到 【js 文件中】

        1）加载器 css-loader：解析 css 代码

        2）加载器 style-loader：把解析后的 css 代码插入到 DOM

2、注意：Webpack 默认只识别 js 代码

3、官方网址指向：

css-loader | webpack 中文文档 (docschina.org)

style-loader | webpack 中文文档 (docschina.org)

1）准备 css 文件代码引入到 src 文件夹中

2）准备 css 代码，并引入到 js 中 【没错，就是引入 js 文件中】

2）下载 css-loader 和 style-loader 本地软件包

  同时，下载两个加载器
    npm i css-loader style-loader --save-dev

3）配置 webpack.config.js 让 Webpack 拥有该加载器功能

module.exports = {
  module: {
    rules: [
      {
        // 匹配 css 文件，/i 就是 无论后缀大小写
        test: /\.css$/i,
        // 使用 这两个加载器，注意，它是从最后一个元素【这里是css-loader】开始使用，顺序不能改变
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

4）重新打包观察

执行命令，npm run build，最后输出如下图框中【注意，下面是 js 文件】

最后 打包后页面 和 打包前页面 展示 一样

  • 6、webpack 打包 css 代码【css 文件中】

 1、下载对应的包，用于 打包 该文件 到【独立的 css 文件中】

        1）加载器 css-loader：解析 css 代码

        2）插件 mini-css-extract-plugin：提取 css 代码 【webpack5 才有】

2、注意：【mini-css-extract-plugin 不能和 style-loader 一起使用】

3、好处：css 文件可以被浏览器缓存，减少 js 文件体积

4、官方网址指向：

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)

1、下载 mini-css-extract-plugin 本地软件包

    npm install mini-css-extract-plugin --save-dev

2、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,

        // 注意：style-loader 和 MiniCssExtractPlugin.loader 不能同时使用
        // use: ['style-loader', "css-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

3、打包后观察效果

注意：执行命令，npm run build，这里 打包后 的 css 代码，还没有被压缩

  • 7、webpack 打包 css 代码【压缩 css 代码】

 1、下载对应的包，用于 打包 该文件 到【独立的 css 文件中】

        1）加载器 css-loader：解析 css 代码

        2）mini-css-extract-plugin：提取 css 代码 【webpack5 才有】

        3）css-minimizer-webpack-plugin ：压缩 css 代码

2、注意：【mini-css-extract-plugin 不能和 style-loader 一起使用】

3、好处：css 文件可以被浏览器缓存，减少 js 文件体积

4、官方网址指向：

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)​​​​​​

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)  【这个是生产模式压缩】

1、下载 css-minimizer-webpack-plugin 本地软件包

    npm install css-minimizer-webpack-plugin --save-dev

2、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`）
      `...`, // 保留这个，就是使 js 代码打包后，还能压缩
      new CssMinimizerPlugin(),
    ],
  }
};;

3、打包后观察效果

 注意：执行命令，npm run build，这里的 css 代码已经被压缩了

  • 8、webpack 打包 less 代码

 1、下载对应的包，用于 打包 该文件

        1）加载器 css-loader：解析 css 代码

        2）mini-css-extract-plugin：提取 css 代码 

        3）less less-loader：下载 less 和 less-loader 包

2、注意：【mini-css-extract-plugin 不能和 style-loader 一起使用】

3、官方网址指向：

css-loader | webpack 中文文档 (docschina.org)

MiniCssExtractPlugin | webpack 中文文档 (docschina.org)​​​​​​

less-loader | webpack 中文文档 (docschina.org)

1、下载 less less-loader 本地软件包

     npm install less less-loader --save-dev

2、新建 less 代码（设置背景图）并引入到 index.js 中 

​

3、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          MiniCssExtractPlugin.loade,
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};

4、打包后观察效果

 注意：执行命令，npm run build，因为用了mini-css-extract-plugin，最后，这段代码打包后，在输出的 css 文件中【注意：图片所在的文件夹也被打包到 dist 文件夹里面了】

​

  • 9、webpack 打包图片

资源模块：Webpack5 内置资源模块（字体，图片等）打包，无需额外 loader，无需下载包

官方网址指向：资源模块 | webpack 中文文档 (docschina.org)

1、配置 webpack.config.js 让 Webpack 拥有打包图片功能

  • 这个规则的作用是匹配以 .png、.jpg、.jpeg、.gif 结尾的文件，并使用 asset 模块类型进行处理。
  • asset 模块类型是 webpack 5 引入的一种处理资源的方式，它会根据文件大小，自动决定是将文件转换为 Data URL (DataURL)，还是将其复制到输出目录。 

1）占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

2）占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

3）占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ],
  },
};

2、打包后观察效果和区别

注意：判断临界值默认为 8KB

1）大于 8KB 文件：发送一个单独的文件并导出 URL 地址【打包输出图片】

2）小于 8KB 文件：导出一个 data URI（base64字符串）【打包后转为base64字符串】

  • 10、webpack 搭建开发环境

  • 问题：之前改代码，需重新打包才能运行查看，效率很低
  • 开发环境：配置 webpack-dev-server 快速开发应用程序
  • 作用：启动 Web 服务，自动检测代码变化，热更新到网页
  • 注意：dist 目录和打包内容是在内存里（更新快）【并非打包到根目录下】
  • 官网地址指向：开发环境 | webpack 中文文档 (docschina.org)

1、下载 webpack-dev-server 软件包到当前项目

    npm i webpack-dev-server--save-dev

2、设置模式为开发模式，并配置自定义命令

3、使用 npm run dev 来启动开发服务器，试试热更新效果

  • 11、webpack 的 打包模式

打包模式：告知 Webpack 使用相应模式的内置优化

1、在 webpack.config.js 配置文件设置 mode 选项

2、在 package.json 命令行设置 mode 参数 

注意：命令行设置的 优先级 高于 配置文件中的，推荐用命令行设置 

  • 12、webpack 打包模式的应用

需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

1、下载 cross-env 软件包到当前项目

    npm i cross-env --save-dev

2、配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

当你运行对应命令 npm run build 或者dev 时，根据 pageage.json 的 NODE_ENV=？？，执行

cross-env ：固定

NODE_ENV=production  ：自定义的，也可以直接写 a=b，但是为了语义化点

3、在 webpack.config.js 区分不同环境使用不同配置 

process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader

process.env ：固定的，通过这个调用 我们定义的值

  • 13、前端-注入环境变量 

  • 需求：前端项目中 index.js 中，开发模式下打印语句生效，生产模式下打印语句失效
  • 问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV
  • 解决：使用 Webpack 内置的 DefinePlugin 插件
  • 作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

plugins: [
    new webpack.DefinePlugin({
      // 就是，在 前端项目 某个js文件 中，遇见 process.env.NODE_ENV 就赋值 给 模式对应的值
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],

测试的结果：

  • 14、开发环境调错 - source map

  • 问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
  • source map：可以准确追踪 error 和 warning 在原始代码的位置
  • 设置：webpack.config.js 配置 devtool 选项
  • inline-source-map 选项：把源码的位置信息一起打包在 js 文件内
  • 注意：source map 仅适于开发环境，不要在生产环境使用（防止被轻易看源码位置）
  • 官网网址指向：Devtool | webpack 中文文档 (docschina.org)
const config = {
  ...
}

// 开发环境下使用 sourcemap 选项
if (process.env.NODE_ENV === 'development') {
  config.devtool = 'inline-source-map'
}

module.exports = config

解决方法：下载 cross-env 软件包，根据 pageage.json 中设置的 环境变量，判断当前启动的是生产模式，还是开发模式

  • 15、解析别名 alias 【用 @ 来代表 src 绝对路径】

  • 解析别名：配置模块如何解析，创建 import 引入路径的别名，来确保模块引入变得更简单
  • 例如：原来路径如图，比较长而且相对路径不安全
  • 解决：在 webpack.config.js 中配置解析别名 @ 来代表 src 绝对路径
  • 官网网址指向：webpack 中文文档 (docschina.org)

module.exports = {
  //...
  resolve: {
    // __dirname 获取的是 webpack.config.js 所在文件夹的绝对路径
    '@': path.resolve(__dirname, 'src')
  },
};

  • 16、开发模式使用 npm 下载包 || 生产模式使用 CDN 引用

  • CDN定义：内容分发网络，指的是一组分布在各个地区的服务器
  • 作用：把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取
  • 好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略
  • cdn 引入网址：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

需求：开发模式使用本地第三方库，生产模式下使用 CDN 加载引入 

1、在 html 中引入第三方库的 CDN 地址 并用模板语法判断

下面这个是 htmlWebpackPlugin 规定的用法，我们后面在 options 定义 useCdn 的值 判断就行

<% if(htmlWebpackPlugin.options.useCdn){ %>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">

<% } %>

2、配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

const config = {
 plugins: [
    new HtmlWebpackPlugin({
      useCdn: process.env.NODE_ENV === 'production', // 生产模式下使用 cdn 引入的地址
    }),
 ]
}

// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让 webpack 防止 import 的包被打包进来）
  config.externals = {
    // key：import from 语句后面的字符串
    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios',
  }
}

module.exports = config

3、两种模式下打包观察效果 

  • 17、webpack 多页面打包

 多页面：多个 html 文件，切换页面实现不同业务逻辑展示

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

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

相关文章

YOLO物体检测系列3：YOLOV3改进解读

YOLO物体检测系列3：YOLOV3改进解读

&#x1f388;&#x1f388;&#x1f388;YOLO 系列教程 总目录 YOLOV1整体解读 YOLOV2整体解读 YOLOV3提出论文&#xff1a;《Yolov3: An incremental improvement》 1、YOLOV3改进 这张图讲道理真的过分了&#xff01;&#xff01;&#xff01;我不是针对谁&#xff0c;在…
阅读更多...
《C++ Primer》第3章 字符串、向量和数组（二）

《C++ Primer》第3章 字符串、向量和数组（二）

参考资料&#xff1a; 《C Primer》第5版《C Primer 习题集》第5版 3.3 标准库类型vector&#xff08;P86&#xff09; vector 表示对象的序列&#xff0c;其中所有对象的类型相同&#xff0c;每个对象都有一个与之对应的索引。vector 容纳着其他对象&#xff0c;所以常被称…
阅读更多...
Linux内核4.14版本——drm框架分析(11)——DRM_IOCTL_MODE_ADDFB2（drm_mode_addfb2）

Linux内核4.14版本——drm框架分析(11)——DRM_IOCTL_MODE_ADDFB2（drm_mode_addfb2）

目录 1. drm_mode_addfb2 2. drm_internal_framebuffer_create 3. drm_fb_cma_create->drm_gem_fb_create->drm_gem_fb_create_with_funcs 4. drm_gem_fb_alloc 4.1 drm_helper_mode_fill_fb_struct 4.2 drm_framebuffer_init 5. 调用流程图 书接上回&#xff0c;使…
阅读更多...
springboot对接postgres

springboot对接postgres

安装postgres 注意:下述链接方式会自动创建数据库steven_russell,若需要创建其他数据库&#xff0c;可以手动执行命令创建数据库 docker run --name postgres \ -p 5432:5432 \ -e POSTGRES_USERsteven_russell \ -e POSTGRES_PASSWORD123456 \ -itd --privilegedtrue postgre…
阅读更多...
【卖出看涨期权策略（Short Call)】

【卖出看涨期权策略（Short Call)】

卖出看涨期权策略&#xff08;Short Call) 卖出看涨期权策略又称为卖出无备兑看涨期权&#xff0c;如果一个投资者在不持有标的资产价格的情况下卖出看涨期权&#xff0c;那么这种策略就是卖出无备兑看涨期权策略。这个策略潜在盈利有限&#xff0c;但是亏损无限。 卖出看涨期…
阅读更多...
基于SSM的应急资源管理系统设计与实现

基于SSM的应急资源管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
Git - Git Merge VS Git Rebase

Git - Git Merge VS Git Rebase

文章目录 概述Flow View小结 概述 Git merge和Git rebase是两种不同的版本控制工作流程&#xff0c;它们用于将一个分支的更改合并到另一个分支。它们有不同的工作原理和应用场景&#xff0c;下面是它们的主要区别&#xff1a; 合并的方式&#xff1a; Git Merge&#xff1a;合…
阅读更多...
MySQL间隙锁深入分析

MySQL间隙锁深入分析

概念 什么是间隙锁&#xff1f; MySQL的间隙锁&#xff08;gap lock&#xff09;是一种锁定相邻数据间隔的机制。 触发时机&#xff1f; 当使用SELECT…FOR UPDATE或UPDATE语句时&#xff0c;MySQL会获取一个范围锁&#xff0c;包括指定条件内的所有数据行&#xff0c;并且还…
阅读更多...
离散数学 学习 之 一阶逻辑基本概念 (一 ）

离散数学 学习 之 一阶逻辑基本概念 (一 ）

个体词可以 理解为主语 &#xff0c; 3 不是偶数 &#xff0c;3 就是 个体常项 凡整数都能被 2 整除 &#xff0c; 整数就是 个体变项 上面的谓词是 &#xff08; 1 &#xff09; 是无理数 &#xff08; 2 &#xff09; 是有理数 &#xff08; 3 &#xff09; 与 同岁 &#xf…
阅读更多...
四川百幕晟科技：提升店铺质量方法是什么？

四川百幕晟科技：提升店铺质量方法是什么？

抖店是抖音旗下的移动电子商务平台&#xff0c;为商家提供在线销售和促销的机会。在抖店&#xff0c;经验值是商家评价和信誉的重要指标之一。反映了平台上商户的服务质量和用户满意度。那么&#xff0c;如何查看自己在抖店手机上的体验分数呢&#xff1f; 1、如何查看抖店手机…
阅读更多...
C# 随机数生成 Mersenne Twister 马特赛特旋转演算法 梅森旋转算法

C# 随机数生成 Mersenne Twister 马特赛特旋转演算法 梅森旋转算法

NuGet安装MathNet.Numerics 引用: using MathNet.Numerics.Random; /// <summary>/// 包括lower&#xff0c;不包括upper/// </summary>/// <param name"lower"></param>/// <param name"upper"></param>/// <para…
阅读更多...
老师如何私发成绩？

老师如何私发成绩？

尊敬的各位老师&#xff0c;大家好&#xff01;你是否曾经为繁琐的成绩管理和与学生家长的沟通而感到头疼&#xff1f;是否希望有一个简单方便的工具&#xff0c;能够帮助你私发成绩、管理班级和与家长交流&#xff1f;那么&#xff0c;易查分将是你的最佳选择&#xff01;易查…
阅读更多...
destoon根据标题删除重复数据

destoon根据标题删除重复数据

因为采集数据比较庞大&#xff0c;难免出现重复数据&#xff0c;所以写了一个根据标题进行删除重复数据的mysql命令&#xff0c;需要的朋友可以使用。 DELETE from destoon_article_36 where title in (SELECT * from (SELECT title FROM destoon_article_36 GROUP BY title …
阅读更多...
想要精通算法和SQL的成长之路 - 受限条件下可到达节点的数目

想要精通算法和SQL的成长之路 - 受限条件下可到达节点的数目

想要精通算法和SQL的成长之路 - 受限条件下可到达节点的数目 前言一. 相交链表&#xff08;邻接图和DFS&#xff09; 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 相交链表&#xff08;邻接图和DFS&#xff09; 原题链接 public int reachableNodes(int n, int[][] ed…
阅读更多...
超强干货，Pytest自动化测试框架fixture固件使用，0-1精通实战

超强干货，Pytest自动化测试框架fixture固件使用，0-1精通实战

前言 如果有以下场景&#xff1a;用例 1 需要先登录&#xff0c;用例 2 不需要登录&#xff0c;用例 3 需要先登录。很显然无法用 setup 和 teardown 来实现了 fixture 可以让我们自定义测试用例的前置条件 fixture 的优势 命名方式灵活&#xff0c;不局限于 setup 和teard…
阅读更多...
黑马JVM总结（七）

黑马JVM总结（七）

&#xff08;1&#xff09;StringTable_编译器优化 “a”“b”对应#4&#xff1a;是去常量池中找ab的这个符号 astore 5&#xff1a;是把这个存入编号为5的局部变量 “ab”对应的指令 #4&#xff0c;跟“a”“b”对应#4下面弄是一样的 在执行s3“ab”这行个代码时&#xf…
阅读更多...
【Python】从入门到上头—mysql数据库操作模块mysql-connector和PyMySQL应用场景 （15）

【Python】从入门到上头—mysql数据库操作模块mysql-connector和PyMySQL应用场景 （15）

mysql-connector MySQL官方提供了mysql-connector-python驱动 安装驱动 python -m pip install mysql-connector连接数据库获取连接 import mysql.connectordb mysql.connector.connect(host"localhost", #ipuser"root", #用户名passwd"root",…
阅读更多...
Python的命令行参数

Python的命令行参数

Python的命令行参数&#xff0c;提供了很多有用的功能&#xff0c;可以方便调试和运行&#xff0c;通过man python就能查看&#xff0c;以下是一些常用参数使用实例和场景: 1. -B参数 在import时候&#xff0c;不产生pyc或者pyo文件: 比如有程序main.py如下: from Hello im…
阅读更多...
SSM - Springboot - MyBatis-Plus 全栈体系（七）

SSM - Springboot - MyBatis-Plus 全栈体系（七）

第二章 SpringFramework 四、SpringIoC 实践和应用 3. 基于 注解 方式管理 Bean 3.4 实验四&#xff1a;Bean 属性赋值&#xff1a;基本类型属性赋值&#xff08;DI&#xff09; Value 通常用于注入外部化属性 3.4.1 声明外部配置 application.properties catalog.nameM…
阅读更多...
UG\NX二次开发 获取装配部件的相关信息UF_ASSEM_ask_component_data

UG\NX二次开发 获取装配部件的相关信息UF_ASSEM_ask_component_data

文章作者：里海 来源网站：王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 简介： UG\NX二次开发 获取装配部件的相关信息UF_ASSEM_ask_component_data 包括：零件名称、引用集名称、实例名称、组件的位置、坐标系矩阵、转换矩阵。 效果： 代…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023