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

Day12-1-Webpack前端工程化开发

news 2026/4/2 2:49:40

Webpack前端工程化

1 案例-webpack打包js文件

1 在index.html中编写代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h3>把字符串倒序并转大写</h3><input id="msg" type="text"><button id="btn">转换</button><h3 id="result"></h3>
</body>
</html>

2 创建StringChange.js文件

image-20230608101708276

3 在index.js中引入StringChange.js中的函数,并编写如下代码

image-20230608101759321

4 运行打包命令

npm run build

5 查看打包后的js文件

image-20230608101905157

2 案例-webpack打包css

创建index.css文件,并写点样式代码

在index.js中导入index.css文件

image-20230127194241212

打包完成后,会自动将css代码放在html中

3 案例-webpack打包SCSS文件

image-20230608105322975

4 案例-webpack打包图片文件

image-20230228204553608

5 案例-webpack打包静态文件

1 取消如下注释

image-20230228204836763

2 static文件夹下一定要有文件,否则打包失败

image-20230228204923447

一般会在static目录下面存放
----images //你不想打包的图片
----libs //第三方的插件，比如动画插件

6 案例-打包阿里 icon图标库

1 把下载好的图标库复制到项目中

image-20230608121206368

2 在index.js中导入图标库

image-20230608121254680

3 下载file-loader插件

npm i file-loader@6.2.0

4 在webpack.base.config.js中配置字体的打包规则

 //配置字体文件的打包规则{test: /\.(eot|svg|ttf|woff|woff2)$/,use: {loader: 'file-loader',options: {outputPath: 'fonts/'}}}

7-案例-移动端适配-flexible

1 下载flexible插件

npm i lib-flexible

2 在index.js中导入flexible插件

import "lib-flexible"

相关文章：

Day12-1-Webpack前端工程化开发

Webpack前端工程化 1 案例-webpack打包js文件 1 在index.html中编写代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><me…...

编程日记 2023/8/3 11:06:41

JUnit教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 JUnit是一个Java语言的单元测试框架。它由Kent Beck和Erich Gamma建立&#xff0c;逐渐成为源于Kent Beck的sUnit的xUnit家族中最为成功的一个。 JUnit有它自己的JUnit扩展生态圈。多数Java的开发环境都已经集成了JUnit作为单元测试的工具。JUnit是由 Erich Gamma 和…...

编程日记 2023/8/3 11:05:40

Hive 安装介绍

介绍 Hive是基于Hadoop的一个数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张数据库表&#xff0c;并提供类SQL查询功能。 其本质是将SQL转换为MapReduce的任务进行运算&#xff0c;底层由HDFS来提供数据的存储&#xff0c;说白了hive可以理解为一个将SQL转换为Ma…...

编程日记 2023/8/3 11:04:39

npm ERR! code EPERM npm ERR! syscall unlink npm ERR!错误解决方法

npm ERR! code EPERM npm ERR! syscall unlink npm ERR!错误解决方法 1、问题描述2、解决方法 1、问题描述 由于之前电脑系统的原因&#xff0c;电脑重置了一下&#xff0c;之前安装的环境都没了&#xff0c;然后在重新安装node.js后在使用npm安装时总是报如下错误&#xff1a…...

编程日记 2023/8/3 11:03:38

redis 高级篇4 分布式锁

一 redis架构图 1.1 redis的架构图 1.2 分布式锁满足条件 1.独占性&#xff1b;2.高可用&#xff1b;3.防死锁&#xff1b;4.不乱抢&#xff1b;5.重入性 二 分布式锁的案例情况 2.1 分布式锁1:单机分布式部署 描述&#xff1a; 使用lock锁和synchronized&#xff0c;单机…...

编程日记 2023/8/3 11:02:37

TPU-NNTC 编译部署LPRNet 车牌识别算法

TPU-NNTC 编译部署LPRNet 车牌识别算法 注意&#xff1a; 由于SOPHGO SE5微服务器的CPU是基于ARM架构&#xff0c;以下步骤将在基于x86架构CPU的开发环境中完成 初始化开发环境(基于x86架构CPU的开发环境中完成)模型转换 (基于x86架构CPU的开发环境中完成) 处理后的LPRNet 项…...

编程日记 2023/8/3 11:01:35

在线/开源GNSS处理软件/平台介绍

当前&#xff0c;存在较多的GNSS开源/免费软件&#xff0c;可用于质量检核、RTK解算和PPP解算等&#xff0c;本文总结了部分常用的处理软件&#xff0c;其详细信息如表1和表2所示。 表1 常用GNSS预处理&#xff08;格式转换、质量检核&#xff09;软件&#xff1a; 软件名称 …...

编程日记 2023/8/3 11:00:34

SpringBoot集成企业微信群聊机器人消息

目录 参考文档概述一、功能作用二、应用场景三、 群机器人发送限制四、创建机器人1、添加2、群机器人Webhook地址 五、发送消息1、文本 text请求体 图文连接 news 参考文档 官方文档 企业微信群机器人应用 概述 现在很多企业都在使用企业微信进行工作交流&#xff0c;自从企…...

编程日记 2023/8/3 10:59:32

​五、驱动 - ​音频系统硬件电路

文章目录 1. 音频系统硬件电路结构2. 蓝牙音频2.1 音乐播放2.2 VoIP通话2.3 4G通话3. 其他3.1 什么是S/PDIF1. 音频系统硬件电路结构 录音放音设备：mic、speaker、耳机、听筒这些带有录音放音功能的设备（因为录放设备可能是模拟设备也可能是数字设备，所以接口可能是模拟接口…...

编程日记 2023/8/3 10:58:31

【图像分割和识别】活动形状模型 （ASM） 和活动外观模型 （AAM）（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/3 10:57:31

HTML基础介绍2

表单格式化 ctrld&#xff1a;复制选中行数的所有代码 ctrlx&#xff1a;删除代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>表单综合案例</title> </head> <body> <!--…...

编程日记 2023/8/3 10:56:29

rar压缩包怎么改成zip格式

不知道大家有没有遇到需要转换压缩包格式的问题&#xff0c;今天想和大家分享rar压缩包改成zip格式的方法。 方法一&#xff1a; 直接修改rar压缩包的后缀名变为zip&#xff0c;就可以修改压缩包文件格式了 方法二&#xff1a; 先将rar压缩包解压出来&#xff0c;然后再将解…...

编程日记 2023/8/3 10:55:28

Mac 补丁管理

Mac 补丁管理涉及通过扫描收集所有缺失补丁的完整列表、下载缺失的补丁、在非生产计算机上测试它们&#xff0c;最后将它们推广到生产环境中进行部署来管理 macOS 端点&#xff0c;修补 Mac 设备&#xff08;又称 Mac 修补&#xff09;可增强 macOS 环境的安全级别。 什么是 m…...

编程日记 2023/8/3 10:54:27

【物理】带电粒子在磁场和电场中移动的 3D 轨迹研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/3 10:53:26

【云原生】K8S二进制搭建上篇

目录 一、环境部署1.1操作系统初始化 二、部署etcd集群2.1 准备签发证书环境在 master01 节点上操作在 node01与02 节点上操作 三、部署docker引擎四、部署 Master 组件4.1在 master01 节点上操 五、部署Worker Node组件 一、环境部署 集群IP组件k8s集群master01192.168.243.1…...

编程日记 2023/8/3 10:52:23

day49-Springboot

Springboot 1. Springboot简介 1.1 简介&#xff1a;Springboot来简化Spring应用开发的一个框架&#xff0c;约定大于配置 1.2 优点&#xff1a; 可以快速的构建独立运行的Spring项目&#xff1b; 框架内有Servlet容器&#xff0c;无需依赖外部&#xff0c;所以不需要达成w…...

编程日记 2023/8/3 10:51:21

Day 9 字符串

慢慢补。 Prefixes and Suffixes 水个代码先。 代码...

编程日记 2023/8/3 10:50:19

Promise用法

学习了promise之后&#xff0c;有点懂但让我说又说不出来&#xff0c;参考别人的记录一下。 1.什么是promise&#xff1f; 2.promise解决了什么问题 3.es6 promise语法 &#xff08;1&#xff09;then链式操作语法 &#xff08;2&#xff09;catch的语法 &#xff08;3&#xf…...

编程日记 2023/8/3 10:49:18

JSP教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 JSP&#xff08;全称Java Server Pages&#xff09;是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上&#xff0c;可以响应客户端发送的请求&#xff0c;并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页&#xff0c;然后返…...

编程日记 2023/8/3 10:48:17

极简在线商城系统，支持docker一键部署

Hmart 给大家推荐一个简约自适应电子商城系统&#xff0c;针对虚拟商品在线发货&#xff0c;支持企业微信通知&#xff0c;支持docker一键部署&#xff0c;个人资质也可搭建。 前端 后端 H2 console 运行命令 docker run -d --name mall --restartalways -p 8080:8080 -e co…...

编程日记 2023/8/3 10:47:16

【JupyterLab实战】构建跨平台AI算力监控仪表盘

1. 为什么需要跨平台AI算力监控&#xff1f; 在AI开发过程中&#xff0c;我们经常遇到这样的场景&#xff1a;模型训练到一半突然卡死&#xff0c;却不知道是GPU内存爆了还是CPU瓶颈&#xff1b;多卡并行时某张卡莫名其妙跑不满&#xff1b;昇腾芯片的温度报警频繁触发却找不到…...

编程新知 2026/4/2 1:36:13

无代码自动化：OpenClaw+Qwen3.5-9B可视化流程搭建

无代码自动化&#xff1a;OpenClawQwen3.5-9B可视化流程搭建 1. 为什么选择OpenClawQwen3.5-9B组合 去年夏天&#xff0c;我发现自己每周要花3小时重复做三件事&#xff1a;整理会议录音、提取待办事项、设置日历提醒。当我尝试用传统自动化工具时&#xff0c;要么需要写代码…...

编程新知 2026/4/2 0:49:46

STM32与LoRa实现高压线缆智能监控方案

1. 项目概述高压线缆间隔棒监控装置是一个典型的工业物联网应用案例&#xff0c;它完美展现了如何将嵌入式系统与无线通信技术结合解决传统行业的痛点问题。作为一名在电力监控领域工作多年的工程师&#xff0c;我深知人工巡检高压线路的种种不便——不仅效率低下&#xff0c;而…...

编程新知 2026/4/2 0:22:55

2025届学术党必备的五大AI写作网站解析与推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek DeepSeek身为新一代人工智能辅助写作工具&#xff0c;于学术论文撰写的整个流程里&#xff0…...

编程新知 2026/4/2 0:04:44

Qwen3.5-9B-AWQ-4bit企业应用落地：电商商品图智能解析与文字提取实战

Qwen3.5-9B-AWQ-4bit企业应用落地&#xff1a;电商商品图智能解析与文字提取实战 1. 电商场景下的图片理解挑战 在电商运营中&#xff0c;每天需要处理海量商品图片。传统的人工审核和标注方式面临三大痛点&#xff1a; 效率瓶颈&#xff1a;人工处理一张商品图平均需要3-5分…...

编程新知 2026/4/1 23:40:28

量子计算入门捷径：在快马平台用qorder实现第一个纠缠态实验

量子计算听起来很高深&#xff0c;但有了合适的工具和平台&#xff0c;入门其实比想象中简单。最近我在InsCode(快马)平台上尝试用qorder框架做了第一个量子纠缠实验&#xff0c;发现整个过程就像搭积木一样直观。下面分享我的学习笔记&#xff0c;希望能帮到同样想入门的朋友。…...

编程新知 2026/4/1 23:22:12

基于MATLAB的用于分析弧齿锥齿轮啮合轨迹的程序已调通，可直接运行并输出齿轮啮合轨迹及传递误差

158.基于matlab的用于分析弧齿锥齿轮啮合轨迹的输出齿轮啮合轨迹及传递误差程序已调通&#xff0c;可直接运行 1. 程序概述 本程序包实现了一套完整的弧齿锥齿轮齿面接触分析&#xff08;TCA&#xff09; 系统&#xff0c;主要用于分析大轮凸面与小轮凹面的啮合特性。程序由刘…...

编程新知 2026/4/1 23:16:05

【个人推荐】一些好用的录音转写工具

因为助教课备课的缘故&#xff0c;需要录制讲座的音频以整理知识点。一次讲座的音频内容很长&#xff0c;即使3x速快进播放依然很耗费时间&#xff0c;因此录音转写的需求浮现了出来。于是闲暇之余探索了下市面上的录音转写工具&#xff0c;浅浅记录下体验。 下面主要推荐三款…...

编程新知 2026/4/1 21:40:34

Potree 点云可视化实战指南：从基础配置到高级测量技巧

1. Potree点云可视化入门指南 第一次接触Potree时&#xff0c;我被它处理海量点云数据的能力震撼到了。这个基于WebGL的开源库&#xff0c;能让普通浏览器流畅渲染上亿级别的点云数据。想象一下&#xff0c;不用安装专业软件&#xff0c;打开网页就能查看精细的激光扫描模型&am…...

编程新知 2026/4/1 21:34:32

WeClaw_42_Agent工具注册全链路：从BaseTool到意图识别的标准化接入

WeClaw_42_Agent工具注册全链路&#xff1a;从BaseTool到意图识别的标准化接入作者: WeClaw 开发团队 日期: 2026-03-29 版本: v1.0 标签: Agent 工具、BaseTool、意图识别、渐进式暴露、延迟注入&#x1f4d6; 摘要 本文系统讲解 WeClaw Agent 工具注册的完整链路。当需要将一…...

编程新知 2026/4/1 21:32:32