webpack 静态模块打包工具
webpack
为什么?
把静态模块内容,压缩,整合,转译等(前端工程化)
- 把less/sass转成css代码
- 把ES6+ 降级成ES5
- 支持多种模块文件类型,多种模块标准语法
vite
为什么不直接学习vite 而学习webpack
因为很多项目还是基于webpack来进行构建的,所以还要掌握webpack
案例:封装utils包,校验用户名和密码长度 ,在index.js种使用,使用webpack打包
步骤:
1.新建项目文件夹,初始化包环境
2.新建src源代码文件夹(书写代码)
3.下载webpack webpack-cli 到项目(版本独立)
4.项目种允许工具命令,采用自定义命令的方式(局部命令)
5.自动产生dist分支文件夹(压缩和优化后,用于最终运行的代码)
总结:
在package.json中自定义命令
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build":"webpack"},
如何运行package.json 里的自定义命令
npm run 自定义命令
修改webpack打包入口和出口
步骤:
1.项目根目录,新建webpack.config.js配置文件
2.导出配置对象,配置入口,出口文件路径
//webpack.config.js
const path = require('path')module.exports={// 入口entry:path.resolve(__dirname,'src/main.js'),// 出口 path 路径 filename 文件名output:{path:path.resolve(__dirname,'dist'),filename:'my-first-webpack.bundle.js'}
}
自动生成html文件
HtmlWebpackPlugin 简化了 HTML 文件的创建
步骤:
1.下载本地软件包
2.配置webpack.config.js让webpack拥有插件的功能
3.指定以public/index.html为模板复制到dist/index.html ,并自动引入其他打包后资源
plugins:[new HtmlWebpackPlugin({// 以指定的html文件为生成模板template:path.resolve(__dirname,'public/index.html')})]
打包css模块
注意:webpack默认只识别js和json文件内容
加载器 css-loader 解析css代码
加载器style-loader 把解析后的css代码插入到DOM
步骤:
1.准备css文件导入到src/main.js中 (压缩转移处理)
2.下载css-loader 和style-loader本地软件包
3.配置webpack.config.js 让webpack拥有该加载器功能
4.打包后运行dist/index.html
打包less模块
加载器 less-loader 把less代码编译为css代码,还需要依赖less软件包
步骤:
1.准备less样式导入到src/main.js中 (压缩转移处理)
2.下载less 和less-loader本地软件包
3.配置webpack.config.js 让webpack拥有该加载器功能
4.打包后运行dist/index.html
打包图片
webpack5 内置了资源模块的打包,无需下载额外的loader
步骤:
1.准备图片素材到src/assets中
2.在index.less中给body添加背景图
3.在main.js中给img标签添加logo图片
4.配置webpack.config.js 让webpack拥有该加载器功能
5.打包后运行dist/index.html
相关文章:
webpack 静态模块打包工具
webpack 为什么? 把静态模块内容,压缩,整合,转译等(前端工程化) 把less/sass转成css代码把ES6 降级成ES5支持多种模块文件类型,多种模块标准语法 vite 为什么不直接学习vite 而学习webpack 因为很多项目还是基于webpack来进…...
万界星空科技/免费开源MES系统/免费仓库管理
仓库管理(仓储管理),指对仓库及仓库内部的物资进行收发、结存等有效控制和管理,确保仓储货物的完好无损,保证生产经营活动的正常进行,在此基础上对货物进行分类记录,通过报表分析展示仓库状态、…...
【暑期每日一练】 Epilogue
目录 选择题(1)解析: (2)解析: (3)解析: (4)解析: (5)解析: 编程题题一描述输入描述:输…...
Go微服务实践 - Rpc核心概念理解
概述 从0研究一下Golang已经Golang的微服务生态体系,Golang的微服务首先要从Rpc开始,在升级到Grpc,详细介绍这些技术点都在解决什么技术问题。 Rpc Rpc (Remote Procedure Call) 远程过程调用,简单的理解是一个节点请求另一个节…...
Effective Java笔记(27)消除非受检的警告
用泛型编程时会遇到讲多编译器警告 : 非受检转换警告( unchecked cast warning )、非受检方法调用警告、非受检参数化可变参数类型警告( unchecked parameterized vararg type warning),以及非受检转换警告…...
Dapper
介绍 Dapper是一个轻量级的ORM(对象关系映射)框架,它可以方便地将数据库查询结果映射到.NET对象上,同时也支持执行原生SQL查询。下面我将详细介绍Dapper的使用方法。 安装Dapper 首先,你需要通过NuGet包管理器将Dap…...
Python基础知识(一)
数据类型 基本类型 数字,字符串,布尔 数字类型 int整型 整数 float浮点型 带小数的数 complex复数 abj 字符串类型 str字符串 视作文本 组成:由数字,字母,空格,其他字符等组合而成 表达ÿ…...
QTthreadPool 程序
//*******************主窗口****************************// ------------------------.H--------------------------------- ----------------------------------------------------------- #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #inclu…...
python注册机制Registry
Register用法 1. 为什么使用Register2. 先验知识-----装饰器2.1 代码视角的装饰器用法2.2 装饰器的使用场景2 3. Registry注册器参数parent介绍未完待续 1. 为什么使用Register 2. 先验知识-----装饰器 2.1 代码视角的装饰器用法 实例1 decorate def func():pass #! 等价于…...
【Megatron-DeepSpeed】张量并行工具代码mpu详解(三):张量并行层的实现及测试
相关博客 【Megatron-DeepSpeed】张量并行工具代码mpu详解(三):张量并行层的实现及测试 【Megatron-DeepSpeed】张量并行工具代码mpu详解(一):并行环境初始化 【Megatron-DeepSpeed】张量并行工具代码mpu详解(二):Collective通信操作的封装ma…...
【SpringBoot学习笔记】02. yaml配置注入
yaml配置注入 yaml基础语法 说明:语法要求严格! 1、空格不能省略 2、以缩进来控制层级关系,只要是左边对齐的一列数据都是同一个层级的。 3、属性和值的大小写都是十分敏感的。 yaml注入配置文件 1、在springboot项目中的resources目录…...
【初阶C语言】指针的妙用
前言:在C语言中,有一个非常重要的知识点,叫做指针,指针也是数据类型中的一种。在本节内容中,我们就一起来学习指针。 学习一个新知识的时候,我们需要从这几个方面:指针是什么,指针是…...
链表——LinkedList类的概述和实现
LinkedList类 1.1LinkedList类概述 LinkedList类底层是基于双向链表结构实现的,不同于ArrayList类和Vector类是基于数组实现的;LinkedList类是非线程安全的;LinkedList类元素允许为null,允许重复元素;LinkedList类插…...
快六一啦,学习CSS3实现一个冰淇淋动画特效
快六一啦,小时候顶多吃个小冰棍,或者是那种小冰袋,现在的小朋友真是好,动不动就能吃到冰淇淋,今天用CSS3实现一个冰淇淋的动画特效吧 目录 实现思路 桶身的实现 冰淇淋身体的实现 五彩颗粒的实现 HTML源码 CSS3源…...
VSCode CMake vcpkg 整合
VSCode 整合 CMake 调试 CMake 工程 // launch.json {"version": "0.2.0","configurations": [{"name": "(gdb) Launch","type": "cppdbg","request": "launch",// Resolved by …...
c++ | win vscode
vscode 适合新手做一些简单的单个的编译和调试 新手适合去配置c 环境,尤其是当涉及复杂一点的编程,如多文件、多线程,在调试的时候会头大,要求会高一点 但怎么说呢? c 编译和调试是最接近实际开发环境的,与…...
算法-快速排序
给你一个整数数组 nums,请你将该数组升序排列。 输入:nums [5,2,3,1] 输出:[1,2,3,5] 输入:nums [5,1,1,2,0,0] 输出:[0,0,1,1,2,5] 详细思路直接看我录制的视频吧 算法-快速排序_哔哩哔哩_bilibili class Soluti…...
SSM项目-博客系统
在线体验项目:登陆页面 项目连接:huhublog_ssm: 个人博客系统 技术栈:SpringBoot、SpringMVC、Mybatis、Redis、JQuery、Ajax、Json (gitee.com) 1.项目技术点分析 SpringBoot、SpringWeb(SpringMVC)、MyBatis、MySQL(8.x)、Redis(存储验…...
Android Gradle Plugin 编译
1. 源码下载: $ mkdir studio-main $ cd studio-main $ repo init -u https://android.googlesource.com/platform/manifest -b studio-main $ repo sync -c -j4 -q 这个官方网址让下载 studio-master-dev 分支,这个分支很老旧了,我这里直接…...
如何快速掌握水土保持方案编制
1、熟悉水土保持常用的主要法律法规、部委规章、规范性文件及技术规范与标准; 2、了解水土保持方案、监测及验收工作开展的流程; 3、熟悉水土保持方案、监测及验收工作需要收集的资料、现场踏勘注意事项; 4、熟悉常见水土保持工程施工工艺…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
