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

篇章十一 打包构建工具

文章目录

    • 一、gulp
      • 1. 流
      • 2. gulp 的作用
      • 3. gulp 的安装、检测和卸载
    • 二、webpack
      • 1. 打包样式资源
      • 2. 打包 html 资源
      • 3. 打包图片资源
      • 4. 压缩 html 代码
      • 5. 生产环境基本配置
    • 三、vite

打包构建工具,都是依赖于 node 环境进行开发,底层封装的内容就是 node 里面的读写文件

一、gulp

gulp 是基于流的打包构建工具

1. 流

  1. 流文件
    • 一种文件传输的格式
    • 一段一段的文件传输
  2. 流格式
    • 从头到尾的一个过程
    • 需要从 源 开始一步一步加工,每一个步骤需要依赖上一步的结果,最终给出一个完整的成品

2. gulp 的作用

  1. 对于 CSS 文件
    • 压缩
    • 转码(自动添加前缀)
  2. 对于 js 文件
    • 压缩
    • 转码(ES6 转 ES5)
  3. 对于 html 文件
    • 压缩
    • 转码(对格式的转换)
  4. 对于静态资源文件处理
  5. 对于第三方文件处理

3. gulp 的安装、检测和卸载

  1. 安装
    • 是一个JavaScript 相关 工具
    • 可以直接使用 npm 进行安装
    • 需要安装在你的电脑里,一次安装多次使用
    • windows:npm install --global gulp
    • mac:sudo npm install --global gulp
  2. 检测:gulp --version
  3. 卸载:npm uninstall --global gulp

https://www.bilibili.com/video/BV1yA411s72G/?vd_source=dea1988d69fb3a1ffe4ad4329ebe71e8

二、webpack

webpack 是基于 js 文件的打包构建工具,它的五个核心概念如下:

  1. Entry:指定入口文件,指示 Webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图
  2. Loader:让 Webpack 能够处理非 JavaScript 文件(因为 webpack 自身只能理解 JavaScript),例如Less
  3. Plugins:插件(Plugins)可以用于执行范围更广的任务,插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
  4. Output:输出,知识 webpack 打包后的输出资源输出到哪里去,以及如何命名
  5. Mode:模式 Mode 指示Webpack 使用相应模式的配置
    • development:能让代码本地调试运行的环境
    • production:能让代码优化上线运行的环境

1. 打包样式资源

  1. 通过 css-loader 把 css 资源 变成 comonjs 模块 加载js 中,里面内容是样式字符串,
  2. 通过 style-loader 创建 style 标签,将 js 中的样式资源插入进行,添加到 head 中生效
  3. 如果遇到 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前端开发工具和依赖安装

各种安装&#xff1a; node.js https://nodejs.org/zh-cn/ 安装完node.js 可以使用npm&#xff0c;npm跟随nodejs一起安装 node --version 查看已安装node.js的版本&#xff0c;确认是否安装nodejs npm -v 查看npm版本npm install <Module Name> 安装模块 npm insta…...

【学习心得】远程root用户访问服务器中的MySQL8

一、Ubuntu下的MySQL8安装 在Ubuntu系统中安装MySQL 8.0可以通过以下步骤进行1. 更新包管理工具的仓库列表&#xff1a; sudo apt update 2. 安装MySQL 8.0&#xff0c;root用户默认没有密码&#xff1a; sudo apt install mysql-server sudo apt install mysql-client 【…...

lust变频器维修电梯变频器CDD34.014.W2.1LSPC1

LUST伺服在安装时须注意&#xff0c;不可有任何的铁屑、螺丝、导线等掉人驱动器内。在安装完成后应作基本的检测动作&#xff0c;如对地阻抗&#xff0c;和短路检测等。 所有的安装及使用事项需要符合安全规定&#xff0c;并且也需要符合当地的相关规定和灾害预防措施。DC BUS…...

跨越地域限制:在线原型设计软件的自由与便捷

网络原型设计软件因其便捷性和灵活性&#xff0c;在现代设计工作中扮演着至关重要的角色。与传统的桌面端软件相比&#xff0c;网络原型设计工具无需安装&#xff0c;不受地域限制&#xff0c;且兼容各种操作系统&#xff0c;无论是Linux、Solaris、Mac还是Windows&#xff0c;…...

flash-waimai:高仿饿了么外卖平台,使用他轻松打造自己的外卖平台

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和工作学习方法 flash-waimai 是一个完整的外卖平台解决方案&#xff0c;包括手机端、后台管理端和 API 服务。该项目仿照了饿了么的外卖服务&#xff0c;为用户提供了一个…...

2.5 塑性力学—应变状态

个人专栏—塑性力学 1.1 塑性力学基本概念 塑性力学基本概念 1.2 弹塑性材料的三杆桁架分析 弹塑性材料的三杆桁架分析 1.3 加载路径对桁架的影响 加载路径对桁架的影响 2.1 塑性力学——应力分析基本概念 应力分析基本概念 2.2 塑性力学——主应力、主方向、不变量 主应力、主…...

1.机器人抓取与操作介绍-深蓝学院

介绍 操作任务 操作 • Insertion • Pushing and sliding • 其它操作任务 抓取 • 两指&#xff08;平行夹爪&#xff09;抓取 • 灵巧手抓取 7轴 Franka 对应人的手臂 6轴 UR构型去掉一个自由度 课程大纲 Robotic Manipulation 操作 • Robotic manipulation refers…...

六,Linux基础环境搭建(CentOS7)- 安装HBase

Linux基础环境搭建&#xff08;CentOS7&#xff09;- 安装HBase 大家注意以下的环境搭建版本号&#xff0c;如果版本不匹配有可能出现问题&#xff01; 一、HBase下载及安装 HBase是一个分布式的、面向列的开源数据库&#xff0c;该技术来源于 Fay Chang 所撰写的Google论文“…...

《计算机网络网络层:连接虚拟世界的关键桥梁》

一、网络层概述 网络层在计算机网络中占据着至关重要的地位&#xff0c;它作为连接不同网络的关键层次&#xff0c;起着承上启下的作用。网络层的主要任务是实现网络互连&#xff0c;将数据设法从源端经过若干个中间节点传送到目的端&#xff0c;为分组交换网上的不同主机提供通…...

【AIGC】2024-arXiv-CtrLoRA:一种可扩展且高效的可控图像生成框架

2024-arXiv-CtrLoRA: An Extensible and Efficient Framework for Controllable Image Generation CtrLoRA&#xff1a;一种可扩展且高效的可控图像生成框架摘要1. 引言相关工作3. 方法3.1 准备工作3.3 有效适应新条件3.4 条件嵌入网络的设计 4. 实验4.1 实验设置4.2 与现有方法…...

立仪光谱共焦在玻璃上奥秘与应用

在现代工业和科学研究中&#xff0c;玻璃因其透明、坚硬和易加工的特性被广泛应用于各个领域。然而&#xff0c;玻璃的厚度测量一直是困扰业界的一大难题。传统的千分尺或电容式传感器虽然在一定程度上能满足生产需求&#xff0c;但在精度、效率以及适用范围上存在明显的局限。…...

【天气识别系统】Python+卷积神经网络算法+人工智能+深度学习+TensorFlow+算法模型训练+Django网页界面

一、介绍 天气识别系统&#xff0c;以Python作为主要编程语言&#xff0c;通过收集了4种常见的天气图像数据集&#xff08;多云、雨天、晴天、日出&#xff09;&#xff0c;然后基于TensorFlow搭建卷积神经网络算法模型&#xff0c;通过多轮迭代训练&#xff0c;最后得到一个识…...

MiniCTX:面向大语言模型定理证明的上下文相关基准测试系统

卡内基梅隆大学的研究人员推出MiniCTX&#xff0c;这是一个强大的基准测试系统&#xff0c;旨在通过整合前所未有的多重上下文元素&#xff08;包括前提、先前证明、注释、符号以及导入和声明等结构组件&#xff09;来彻底改变大型语言模型中定理证明能力的评估方式&#xff0c…...

树莓派开发相关知识三PWM控制转速

基于树莓派PWM控制 控制L298N马达驱动转速 马达驱动转速 1、L298N电路图&#xff1a; 2、需要留意的有几点 INA~IND四个引脚分别控制OUTA-OUTD&#xff0c;即&#xff0c;INA高电平则OUTA有电。 ENA&#xff0c;ENB分别使能控制OUTA~OUTB以及OUTC~OUTD。 OUT口有VCC电压驱动…...

SpringBoot最常用的注解

1、RestController 作用&#xff1a;与Controller类似&#xff0c;但是RestController会自动将返回值转换为JSON格式。 2、RequestMapping 作用&#xff1a;用于映射请求URL和处理方法。 RequestMapping是Spring MVC框架中的一个核心注解&#xff0c;它用于映射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相关的文章&#xff0c;分别从底层通信系统akka/Pekko&#xff0c;RPC实现方式动态代理以及Flink RPC相关的组件做了介绍 深度了解flink rpc机制&#xff08;一&#xff09;-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远程如何随时随地玩潜水员戴夫教程

如果你是潜水员戴夫的忠实玩家&#xff0c;你知道如何在手机上玩潜水员戴夫吗&#xff1f;潜水员戴夫是一个以神秘蓝洞为背景的海洋冒险游戏。在这个游戏里你白天可以在美丽的大海里打鱼&#xff0c;晚上可以经营寿司店。现在这个游戏也能实现用手机随时随地畅玩了&#xff01;…...

UE5 喷射背包

首选创建一个输入操作 然后在输入映射中添加&#xff0c;shift是向上飞&#xff0c;ctrl是向下飞 进入人物蓝图中编写逻辑&#xff0c;变量HaveJatpack默认true&#xff0c;Thrust为0 最后...

【Vue3】第三篇

Vue3学习第三篇 01. 组件组成02. 组件嵌套关系03. 组件注册方式04. 组件传递数据Props05. 组件传递多种数据类型06. 组件传递Props校验07. 组件事件08. 组件事件配合v-model使用09. 组件数据传递10. 透传Attributes 01. 组件组成 在vue当中&#xff0c;组件是最重要的知识&…...

c++二级指针

如果要通过函数改变一个指针的值&#xff0c;要往函数中传入指针的指针 如果要通过函数改变一个变量的值&#xff0c;那就要往函数中传入这个变量的地址 改变a的值和b的值 #include <iostream>using namespace std;void swap(int* a, int* b) {int temp *a;*a *b;*b …...

客户端存储 — IndexedDB 实现分页查询

前言 相信 IndexedDB 大家都有过了解&#xff0c;但是不一定每个人都有过实践&#xff0c;并且其中涉及到事务、游标等概念&#xff0c;会导致在初次使用时会有些不适应&#xff0c;那么本文会通过 IndexedDB 实现分页查询的形式进行实践&#xff0c;在开始之前&#xff0c;可…...

logback 如何将日志输出到文件

如何作 将日志输出到文件需要使用 RollingFileAppender&#xff0c;该 Appender 必须定义 rollingPolicy &#xff0c;另外 rollingPollicy 下必须定义 fileNamePattern 和 encoder <appender name"fileAppender" class"ch.qos.logback.core.rolling.Rollin…...

Files.newBufferedReader和Files.readAllLines

在Java中&#xff0c;Files.newBufferedReader 和 Files.readAllLines 都是用于从文件中读取数据的工具方法&#xff0c;但它们的使用场景和功能有所不同。下面我将详细解释这两个方法的含义、用途、区别、优缺点以及各自的使用场景。 1. Files.newBufferedReader 含义和用途…...

阿里云虚拟主机搭建wordpress/搜狗搜索网页版

Go语言创建web server非常简单&#xff0c;部署也很容易&#xff0c;不像IIS、Apache等那么重量级&#xff0c;需要各种依赖、配置。一些功能单一的web 服务&#xff0c;用Go语言开发特别适合。http文件上传下载服务&#xff0c;在很多地方都能用到&#xff0c;大到门户网站&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寻找目标组件的两种方式&#xff1a; 显式Intent&#xff1a;通过指定Intent组件名称来实现的&#xff0c;它一般用在知道目标组件名称的前提下&#xff0c;一般是在相同的应用程序内部实现的。 隐式Intent&#xff1a;通过Intent Filter来实现的&#xff0c;它一般用在没…...

资讯类网站建设方案书/竞价排名什么意思

1 数据库 ACID指的是什么 原子性&#xff0c;一致性&#xff0c;隔离性&#xff0c;持久性 2 ACID 重要的特性隔离性 隔离级别,隔离级别主要是针对数据库展开的&#xff0c;当数据库开启事务的时候&#xff0c;会有不同的数据库隔离级别&#xff0c;重点需要了解的有两种隔离…...

wordpress 插件机制/企点下载

“管理”是建立在合法的&#xff0c;有报酬的和强制性的权力基础上的&#xff0c;但是“领导”更多的是建立在个人影响权和专长权以及模范作用的基础上&#xff0c;首先&#xff0c;领导者必然会有部下或追随者&#xff0c;其次&#xff0c;领导者拥有影响追随者的能力&#xf…...

做网站收广告费/百度上做推广怎么做

2019独角兽企业重金招聘Python工程师标准>>> 在上一篇 数据挖掘入门算法整理 中提到&#xff0c; Apriori算法是 关联规则算法中使用最为广泛的算法&#xff0c;这次我们就来学习下该算法的基本知识。 一、算法概述 Apriori 算法是一种最有影响力的挖掘布尔关联规则…...