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

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字符串 视作文本 组成:由数字,字母,空格,其他字符等组合而成 表达&#xff…...

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详解(三)&#xff1a;张量并行层的实现及测试 【Megatron-DeepSpeed】张量并行工具代码mpu详解(一)&#xff1a;并行环境初始化 【Megatron-DeepSpeed】张量并行工具代码mpu详解(二)&#xff1a;Collective通信操作的封装ma…...

【SpringBoot学习笔记】02. yaml配置注入

yaml配置注入 yaml基础语法 说明&#xff1a;语法要求严格&#xff01; 1、空格不能省略 2、以缩进来控制层级关系&#xff0c;只要是左边对齐的一列数据都是同一个层级的。 3、属性和值的大小写都是十分敏感的。 yaml注入配置文件 1、在springboot项目中的resources目录…...

【初阶C语言】指针的妙用

前言&#xff1a;在C语言中&#xff0c;有一个非常重要的知识点&#xff0c;叫做指针&#xff0c;指针也是数据类型中的一种。在本节内容中&#xff0c;我们就一起来学习指针。 学习一个新知识的时候&#xff0c;我们需要从这几个方面&#xff1a;指针是什么&#xff0c;指针是…...

链表——LinkedList类的概述和实现

LinkedList类 1.1LinkedList类概述 LinkedList类底层是基于双向链表结构实现的&#xff0c;不同于ArrayList类和Vector类是基于数组实现的&#xff1b;LinkedList类是非线程安全的&#xff1b;LinkedList类元素允许为null&#xff0c;允许重复元素&#xff1b;LinkedList类插…...

快六一啦,学习CSS3实现一个冰淇淋动画特效

快六一啦&#xff0c;小时候顶多吃个小冰棍&#xff0c;或者是那种小冰袋&#xff0c;现在的小朋友真是好&#xff0c;动不动就能吃到冰淇淋&#xff0c;今天用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 环境&#xff0c;尤其是当涉及复杂一点的编程&#xff0c;如多文件、多线程&#xff0c;在调试的时候会头大&#xff0c;要求会高一点 但怎么说呢&#xff1f; c 编译和调试是最接近实际开发环境的&#xff0c;与…...

算法-快速排序

给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 输入&#xff1a;nums [5,2,3,1] 输出&#xff1a;[1,2,3,5] 输入&#xff1a;nums [5,1,1,2,0,0] 输出&#xff1a;[0,0,1,1,2,5] 详细思路直接看我录制的视频吧 算法-快速排序_哔哩哔哩_bilibili class Soluti…...

SSM项目-博客系统

在线体验项目&#xff1a;登陆页面 项目连接&#xff1a;huhublog_ssm: 个人博客系统 技术栈&#xff1a;SpringBoot、SpringMVC、Mybatis、Redis、JQuery、Ajax、Json (gitee.com) 1.项目技术点分析 SpringBoot、SpringWeb(SpringMVC)、MyBatis、MySQL(8.x)、Redis(存储验…...

Android Gradle Plugin 编译

1. 源码下载&#xff1a; $ 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 分支&#xff0c;这个分支很老旧了&#xff0c;我这里直接…...

如何快速掌握水土保持方案编制

1、熟悉水土保持常用的主要法律法规、部委规章、规范性文件及技术规范与标准&#xff1b; 2、了解水土保持方案、监测及验收工作开展的流程&#xff1b; 3、熟悉水土保持方案、监测及验收工作需要收集的资料、现场踏勘注意事项&#xff1b; 4、熟悉常见水土保持工程施工工艺…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...

Yii2项目自动向GitLab上报Bug

Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...

第22节 Node.js JXcore 打包

Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本&#xff0c;基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...

【向量库】Weaviate 搜索与索引技术:从基础概念到性能优化

文章目录 零、概述一、搜索技术分类1. 向量搜索&#xff1a;捕捉语义的智能检索2. 关键字搜索&#xff1a;精确匹配的传统方案3. 混合搜索&#xff1a;语义与精确的双重保障 二、向量检索技术分类1. HNSW索引&#xff1a;大规模数据的高效引擎2. Flat索引&#xff1a;小规模数据…...