篇章十一 打包构建工具
文章目录
- 一、gulp
- 1. 流
- 2. gulp 的作用
- 3. gulp 的安装、检测和卸载
- 二、webpack
- 1. 打包样式资源
- 2. 打包 html 资源
- 3. 打包图片资源
- 4. 压缩 html 代码
- 5. 生产环境基本配置
- 三、vite
打包构建工具,都是依赖于 node 环境进行开发,底层封装的内容就是 node 里面的读写文件
一、gulp
gulp 是基于流的打包构建工具
1. 流
- 流文件
- 一种文件传输的格式
- 一段一段的文件传输
- 流格式
- 从头到尾的一个过程
- 需要从 源 开始一步一步加工,每一个步骤需要依赖上一步的结果,最终给出一个完整的成品
2. gulp 的作用
- 对于 CSS 文件
- 压缩
- 转码(自动添加前缀)
- 对于 js 文件
- 压缩
- 转码(ES6 转 ES5)
- 对于 html 文件
- 压缩
- 转码(对格式的转换)
- 对于静态资源文件处理
- 对于第三方文件处理
…
3. gulp 的安装、检测和卸载
- 安装
- 是一个JavaScript 相关 工具
- 可以直接使用 npm 进行安装
- 需要安装在你的电脑里,一次安装多次使用
- windows:
npm install --global gulp
- mac:
sudo npm install --global gulp
- 检测:
gulp --version
- 卸载:
npm uninstall --global gulp
https://www.bilibili.com/video/BV1yA411s72G/?vd_source=dea1988d69fb3a1ffe4ad4329ebe71e8
二、webpack
webpack 是基于 js 文件的打包构建工具,它的五个核心概念如下:
- Entry:指定入口文件,指示 Webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图
- Loader:让 Webpack 能够处理非 JavaScript 文件(因为 webpack 自身只能理解 JavaScript),例如Less
- Plugins:插件(Plugins)可以用于执行范围更广的任务,插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
- Output:输出,知识 webpack 打包后的输出资源输出到哪里去,以及如何命名
- Mode:模式 Mode 指示Webpack 使用相应模式的配置
- development:能让代码本地调试运行的环境
- production:能让代码优化上线运行的环境
1. 打包样式资源
- 通过 css-loader 把 css 资源 变成 comonjs 模块 加载js 中,里面内容是样式字符串,
- 通过 style-loader 创建 style 标签,将 js 中的样式资源插入进行,添加到 head 中生效
- 如果遇到 less 资源,会先把 less 转换为 css 再执行上述顺序
2. 打包 html 资源
const {resolve} = require('path')moule.exports = {entry : './src/index.js',output:{filename: 'built.js',path:resolve(_dirname,'build')},module:{rules:[// loader 的配置]},plugins:[// plugins 的配置// html-webpack-plugin// 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)// 需求:需要有结构的 HTML文件new HtmlWebpackPlugin({// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS)template:'./src/index.html'})],mode:'development'
};
3. 打包图片资源
module:{rules:[// loader 的配置{test:/\.less$/,// 要使用多个loader处理用useuse:['style-loader','css-loader','less-loader']},{// 处理图片资源test:/\.(jpg|png|gif)$/,// 使用一个loader// 下载 url-loader,file-loader,npm i url-loader file-loader-D loader:{// 图片大小小于 8kb,就会被 base64 处理// 优点:减少请求数量(减轻服务器压力)// 缺点:图片体积会更大(文件请求速度更慢)limit: 8*1024,// 解决:当我们因为 url-loader 默认使用es6 模块解析,而 html-loader引入图片是 commonjs ,解析时就会出现问题: [Object Module],因此需要关闭 url-loader的es6模块而使用 commonjs解析esModule: false,// 输出到指定目录下,其他雷同outputPath:'images',// 给图片进行重命名// [hash:10] 取图片的hash的前10位// [ext] 取文件原来的扩展名name: '[hash:10].[ext]'}},{// 处理 html 图片资源test:/\.html$/,// npm i html-loader -D // 处理 html 文件的img 图片(负责引入 img,从而能被 url-loader进行处理)loader: 'html-loader'},]
},
4. 压缩 html 代码
webpack.config.js
const {resolve} = require('path')moule.exports = {entry : './src/index.js',output:{filename: 'js/built.js',path:resolve(_dirname,'build')},plugins:[// plugins 的配置// html-webpack-plugin// 功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)// 需求:需要有结构的 HTML文件new HtmlWebpackPlugin({// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS)template:'./src/index.html',// 压缩 html 代码minify: {// 移除空格collapseWhitespace: true,// 移除注释removeComments: true}})],mode:'production'
};
5. 生产环境基本配置
const { resolve } = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetWebpackPlugin = require('optimize-css-asset-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 定义 node.js 环境变量,决定使用 browserslist的哪个环境
process.env.NODE_ENV = 'production';
const commonCssLoader = [MiniCssExtractPlugin.loader,'css-loader',{// 还需要在 package.json 中定义 browserslistloader: 'postcss-loader',options:{ident:'postcss',plugins:()=>[require('postcss-preset-env')()]}}
]module.exports = {entry : './src/index.js',output:{filename: 'js/built.js',path:resolve(_dirname,'build')},module:{rules:[{test: '/\.css$/',use: [...commonCssLoader ]},{test: '/\.less$/',use: [...commonCssLoader ,'less-loader']},{test: '/\.js$/',exclude:/node_modules/,loader:'eslint-loader',option:{fix:true}},{test:/\.(jpg|png|gif)/,loader:'url-loadder',options:{limit: 8*1024,name: '[hash:10].[ext]',outputPath:'images',esModule:false}},{test:/\.html$/,loader:'hml-loadder',},{exclude:/\.(js|css|less|html|jpg|png|gif)/,loader: 'file-loader',options:{outputPath:'media'}}]},plugins:[// plugins 的配置// mini-css-extract-pluginnew MiniCssExtractPlugin({filename:'css/built.css'}),// 压缩cssnew OptimizeCssAssetWebpackPlugin(),// html-webpack-pluginnew HtmlWebpackPlugin({// 复制 './src/index.html' 文件,并自动引入打包输出的所有资源(JS/CSS)template:'./src/index.html',// 压缩 html 代码minify: {// 移除空格collapseWhitespace: true,// 移除注释removeComments: true}})],mode:'production'
};
三、vite
相关文章:
篇章十一 打包构建工具
文章目录 一、gulp1. 流2. gulp 的作用3. gulp 的安装、检测和卸载 二、webpack1. 打包样式资源2. 打包 html 资源3. 打包图片资源4. 压缩 html 代码5. 生产环境基本配置 三、vite 打包构建工具,都是依赖于 node 环境进行开发,底层封装的内容就是 node 里…...
青少年编程与数学 02-002 Sql Server 数据库应用 06课题、数据库操作
青少年编程与数学 02-002 Sql Server 数据库应用 06课题、数据库操作 课题摘要:一、数据库的文件组成二、系统数据库三、创建数据库四、数据库配置1. 修改数据库文件大小和增长设置2. 添加或移除数据文件3. 设置数据库选项4. 配置数据库的恢复模型5. 管理数据库的访问权限6. 使…...
MacOS下载安装Logisim(图文教程)
本章教程主要介绍如何在MacOS系统中安装Logisim。 一、Logisim是什么? Logisim是一个用于电子逻辑门电路模拟的教育工具软件。它允许用户通过图形界面构建和测试复杂的数字逻辑电路,如加法器、解码器、编码器、寄存器、内存等,从而帮助学生理解计算机硬件的工作原理。 二、如…...
Flink CDC系列之:调研应用Flink CDC将 ELT 从 MySQL 流式传输到 StarRocks方案
Flink CDC系列之:调研应用Flink CDC将 ELT 从 MySQL 流式传输到 StarRocks方案 准备准备 Flink Standalone 集群准备 docker compose为 MySQL 准备记录使用 Flink CDC CLI 提交作业 同步架构和数据更改路由变更清理 本教程将展示如何使用 Flink CDC 快速构建从 MySQ…...
一次元空间FullGC导致OOM问题分析
原文,作者:kkyeer 原文需要翻墙,所以转载。 现象 观测平台告警:FullGC次数大于阈值,5分钟内大于11次,频次大概1-2周有一次 告警后服务概率性会自动恢复,控制台打印 Exception: java.lang.OutOf…...
Web前端开发工具和依赖安装
各种安装: node.js https://nodejs.org/zh-cn/ 安装完node.js 可以使用npm,npm跟随nodejs一起安装 node --version 查看已安装node.js的版本,确认是否安装nodejs npm -v 查看npm版本npm install <Module Name> 安装模块 npm insta…...
【学习心得】远程root用户访问服务器中的MySQL8
一、Ubuntu下的MySQL8安装 在Ubuntu系统中安装MySQL 8.0可以通过以下步骤进行1. 更新包管理工具的仓库列表: sudo apt update 2. 安装MySQL 8.0,root用户默认没有密码: sudo apt install mysql-server sudo apt install mysql-client 【…...
lust变频器维修电梯变频器CDD34.014.W2.1LSPC1
LUST伺服在安装时须注意,不可有任何的铁屑、螺丝、导线等掉人驱动器内。在安装完成后应作基本的检测动作,如对地阻抗,和短路检测等。 所有的安装及使用事项需要符合安全规定,并且也需要符合当地的相关规定和灾害预防措施。DC BUS…...
跨越地域限制:在线原型设计软件的自由与便捷
网络原型设计软件因其便捷性和灵活性,在现代设计工作中扮演着至关重要的角色。与传统的桌面端软件相比,网络原型设计工具无需安装,不受地域限制,且兼容各种操作系统,无论是Linux、Solaris、Mac还是Windows,…...
flash-waimai:高仿饿了么外卖平台,使用他轻松打造自己的外卖平台
嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和工作学习方法 flash-waimai 是一个完整的外卖平台解决方案,包括手机端、后台管理端和 API 服务。该项目仿照了饿了么的外卖服务,为用户提供了一个…...
2.5 塑性力学—应变状态
个人专栏—塑性力学 1.1 塑性力学基本概念 塑性力学基本概念 1.2 弹塑性材料的三杆桁架分析 弹塑性材料的三杆桁架分析 1.3 加载路径对桁架的影响 加载路径对桁架的影响 2.1 塑性力学——应力分析基本概念 应力分析基本概念 2.2 塑性力学——主应力、主方向、不变量 主应力、主…...
1.机器人抓取与操作介绍-深蓝学院
介绍 操作任务 操作 • Insertion • Pushing and sliding • 其它操作任务 抓取 • 两指(平行夹爪)抓取 • 灵巧手抓取 7轴 Franka 对应人的手臂 6轴 UR构型去掉一个自由度 课程大纲 Robotic Manipulation 操作 • Robotic manipulation refers…...
六,Linux基础环境搭建(CentOS7)- 安装HBase
Linux基础环境搭建(CentOS7)- 安装HBase 大家注意以下的环境搭建版本号,如果版本不匹配有可能出现问题! 一、HBase下载及安装 HBase是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“…...
《计算机网络网络层:连接虚拟世界的关键桥梁》
一、网络层概述 网络层在计算机网络中占据着至关重要的地位,它作为连接不同网络的关键层次,起着承上启下的作用。网络层的主要任务是实现网络互连,将数据设法从源端经过若干个中间节点传送到目的端,为分组交换网上的不同主机提供通…...
【AIGC】2024-arXiv-CtrLoRA:一种可扩展且高效的可控图像生成框架
2024-arXiv-CtrLoRA: An Extensible and Efficient Framework for Controllable Image Generation CtrLoRA:一种可扩展且高效的可控图像生成框架摘要1. 引言相关工作3. 方法3.1 准备工作3.3 有效适应新条件3.4 条件嵌入网络的设计 4. 实验4.1 实验设置4.2 与现有方法…...
立仪光谱共焦在玻璃上奥秘与应用
在现代工业和科学研究中,玻璃因其透明、坚硬和易加工的特性被广泛应用于各个领域。然而,玻璃的厚度测量一直是困扰业界的一大难题。传统的千分尺或电容式传感器虽然在一定程度上能满足生产需求,但在精度、效率以及适用范围上存在明显的局限。…...
【天气识别系统】Python+卷积神经网络算法+人工智能+深度学习+TensorFlow+算法模型训练+Django网页界面
一、介绍 天气识别系统,以Python作为主要编程语言,通过收集了4种常见的天气图像数据集(多云、雨天、晴天、日出),然后基于TensorFlow搭建卷积神经网络算法模型,通过多轮迭代训练,最后得到一个识…...
MiniCTX:面向大语言模型定理证明的上下文相关基准测试系统
卡内基梅隆大学的研究人员推出MiniCTX,这是一个强大的基准测试系统,旨在通过整合前所未有的多重上下文元素(包括前提、先前证明、注释、符号以及导入和声明等结构组件)来彻底改变大型语言模型中定理证明能力的评估方式,…...
树莓派开发相关知识三PWM控制转速
基于树莓派PWM控制 控制L298N马达驱动转速 马达驱动转速 1、L298N电路图: 2、需要留意的有几点 INA~IND四个引脚分别控制OUTA-OUTD,即,INA高电平则OUTA有电。 ENA,ENB分别使能控制OUTA~OUTB以及OUTC~OUTD。 OUT口有VCC电压驱动…...
SpringBoot最常用的注解
1、RestController 作用:与Controller类似,但是RestController会自动将返回值转换为JSON格式。 2、RequestMapping 作用:用于映射请求URL和处理方法。 RequestMapping是Spring MVC框架中的一个核心注解,它用于映射HTTP请求和控…...
js 获取当前时间与前一个月时间
// 获取当前时间的毫秒数 var currentTimeMillis new Date().getTime();// 获取前一个月的Date对象 var dateLastMonth new Date(); dateLastMonth.setMonth(dateLastMonth.getMonth() - 1);// 获取前一个月的毫秒数 var timeMillisLastMonth dateLastMonth.getTime();conso…...
深度了解flink rpc机制(四) 组件启动流程源码分析
前言 目前已发布了3篇关于Flink RPC相关的文章,分别从底层通信系统akka/Pekko,RPC实现方式动态代理以及Flink RPC相关的组件做了介绍 深度了解flink rpc机制(一)-Akka/Pekko_flink pekko akka-CSDN博客 深度了解flink rpc机制&…...
C++基于opencv的视频质量检测--遮挡检测
文章目录 0.引言1. 原始代码分析1.1 存在的问题 2. 优化方案3. 优化后的代码4. 代码详细解读4.1. 输入检查4.2. 图像预处理4.3. 高斯模糊4.4. 梯度计算4.5. 计算梯度幅值和方向4.6. 边缘检测4.7. 计算边缘密度4.8. 估计遮挡程度4.9. 限定结果范围4.10. 返回结果 0.引言 视频质…...
手机玩潜水员戴夫?GameViewer远程如何随时随地玩潜水员戴夫教程
如果你是潜水员戴夫的忠实玩家,你知道如何在手机上玩潜水员戴夫吗?潜水员戴夫是一个以神秘蓝洞为背景的海洋冒险游戏。在这个游戏里你白天可以在美丽的大海里打鱼,晚上可以经营寿司店。现在这个游戏也能实现用手机随时随地畅玩了!…...
UE5 喷射背包
首选创建一个输入操作 然后在输入映射中添加,shift是向上飞,ctrl是向下飞 进入人物蓝图中编写逻辑,变量HaveJatpack默认true,Thrust为0 最后...
【Vue3】第三篇
Vue3学习第三篇 01. 组件组成02. 组件嵌套关系03. 组件注册方式04. 组件传递数据Props05. 组件传递多种数据类型06. 组件传递Props校验07. 组件事件08. 组件事件配合v-model使用09. 组件数据传递10. 透传Attributes 01. 组件组成 在vue当中,组件是最重要的知识&…...
c++二级指针
如果要通过函数改变一个指针的值,要往函数中传入指针的指针 如果要通过函数改变一个变量的值,那就要往函数中传入这个变量的地址 改变a的值和b的值 #include <iostream>using namespace std;void swap(int* a, int* b) {int temp *a;*a *b;*b …...
客户端存储 — IndexedDB 实现分页查询
前言 相信 IndexedDB 大家都有过了解,但是不一定每个人都有过实践,并且其中涉及到事务、游标等概念,会导致在初次使用时会有些不适应,那么本文会通过 IndexedDB 实现分页查询的形式进行实践,在开始之前,可…...
logback 如何将日志输出到文件
如何作 将日志输出到文件需要使用 RollingFileAppender,该 Appender 必须定义 rollingPolicy ,另外 rollingPollicy 下必须定义 fileNamePattern 和 encoder <appender name"fileAppender" class"ch.qos.logback.core.rolling.Rollin…...
Files.newBufferedReader和Files.readAllLines
在Java中,Files.newBufferedReader 和 Files.readAllLines 都是用于从文件中读取数据的工具方法,但它们的使用场景和功能有所不同。下面我将详细解释这两个方法的含义、用途、区别、优缺点以及各自的使用场景。 1. Files.newBufferedReader 含义和用途…...
阿里云虚拟主机搭建wordpress/搜狗搜索网页版
Go语言创建web server非常简单,部署也很容易,不像IIS、Apache等那么重量级,需要各种依赖、配置。一些功能单一的web 服务,用Go语言开发特别适合。http文件上传下载服务,在很多地方都能用到,大到门户网站&am…...
动态网站和响应式网站/国际军事新闻
一 代码header("Content-Type:text/html;charsetutf-8");//设置编码/* 创建XML格式的字符串 */$str <<XML;$xml simplexml_load_string($str);//创建一个simplexml对象foreach($xml->children() as $layer_one){//循环子节点元素foreach($layer_one->a…...
有专门做ppt的网站吗/新闻头条最新消息今天
Intent寻找目标组件的两种方式: 显式Intent:通过指定Intent组件名称来实现的,它一般用在知道目标组件名称的前提下,一般是在相同的应用程序内部实现的。 隐式Intent:通过Intent Filter来实现的,它一般用在没…...
资讯类网站建设方案书/竞价排名什么意思
1 数据库 ACID指的是什么 原子性,一致性,隔离性,持久性 2 ACID 重要的特性隔离性 隔离级别,隔离级别主要是针对数据库展开的,当数据库开启事务的时候,会有不同的数据库隔离级别,重点需要了解的有两种隔离…...
wordpress 插件机制/企点下载
“管理”是建立在合法的,有报酬的和强制性的权力基础上的,但是“领导”更多的是建立在个人影响权和专长权以及模范作用的基础上,首先,领导者必然会有部下或追随者,其次,领导者拥有影响追随者的能力…...
做网站收广告费/百度上做推广怎么做
2019独角兽企业重金招聘Python工程师标准>>> 在上一篇 数据挖掘入门算法整理 中提到, Apriori算法是 关联规则算法中使用最为广泛的算法,这次我们就来学习下该算法的基本知识。 一、算法概述 Apriori 算法是一种最有影响力的挖掘布尔关联规则…...