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

webpack基础知识十：与webpack类似的工具还有哪些？区别？

news 2026/5/17 17:02:09

在这里插入图片描述
一、模块化工具

模块化是一种处理复杂系统分解为更好的可管理模块的方式

可以用来分割，组织和打包应用。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体(bundle)

在前端领域中，并非只有webpack这一款优秀的模块打包工具，还有其他类似的工具，例如Rollup、Parcel、snowpack，以及最近风头无两的Vite

通过这些模块打包工具，能够提高我们的开发效率，减少开发成本

这里没有提及gulp、grunt是因为它们只是定义为构建工具，不能类比

Rollup

Rollup 是一款 ES Modules 打包器，从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup要小巧的多

现在很多我们熟知的库都都使用它进行打包，比如：Vue、React和three.js等

举个例子：

// ./src/messages.js
export default {hi: 'Hey Guys, I am zce~'
}// ./src/logger.js
export const log = msg => {console.log('---------- INFO ----------')console.log(msg)console.log('--------------------------')
}export const error = msg => {console.error('---------- ERROR ----------')console.error(msg)console.error('---------------------------')
}// ./src/index.js
import { log } from './logger'
import messages from './messages'
log(messages.hi)

然后通过rollup进行打包

$ npx rollup ./src/index.js --file ./dist/bundle.js

打包结果如下图

在这里插入图片描述
可以看到，代码非常简洁，完成不像webpack那样存在大量引导代码和模块函数

并且error方法由于没有被使用，输出的结果中并无error方法，可以看到，rollup默认开始Tree-shaking 优化输出结果

因此，可以看到Rollup的优点：

  • 代码效率更简洁、效率更高
  • 默认支持 Tree-shaking

但缺点也十分明显，加载其他类型的资源文件或者支持导入 CommonJS 模块，又或是编译 ES 新特性，这些额外的需求 Rollup需要使用插件去完成

综合来看，rollup并不适合开发应用使用，因为需要使用第三方模块，而目前第三方模块大多数使用CommonJs方式导出成员，并且rollup不支持HMR，使开发效率降低

但是在用于打包JavaScript 库时，rollup比 webpack 更有优势，因为其打包出来的代码更小、更快，其存在的缺点可以忽略

Parcel

Parcel ，是一款完全零配置的前端打包器，它提供了 “傻瓜式” 的使用体验，只需了解简单的命令，就能构建前端应用程序

Parcel 跟 Webpack 一样都支持以任意类型文件作为打包入口，但建议使用HTML文件作为入口，该HTML文件像平时一样正常编写代码、引用资源。如下所示：

<!-- ./src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Parcel Tutorials</title>
</head>
<body><script src="main.js"></script>
</body>
</html>

main.js文件通过ES Moudle方法导入其他模块成员

// ./src/main.js
import { log } from './logger'
log('hello parcel')
// ./src/logger.js
export const log = msg => {console.log('---------- INFO ----------')console.log(msg)
}

运行之后，使用命令打包

npx parcel src/index.html

执行命令后，Parcel不仅打包了应用，同时也启动了一个开发服务器，跟webpack Dev Server一样

跟webpack类似，也支持模块热替换，但用法更简单

同时，Parcel有个十分好用的功能：支持自动安装依赖，像webpack开发阶段突然使用安装某个第三方依赖，必然会终止dev server然后安装再启动。而Parcel则免了这繁琐的工作流程

同时，Parcel能够零配置加载其他类型的资源文件，无须像webpack那样配置对应的loader

打包命令如下：

npx parcel src/index.html

由于打包过程是多进程同时工作，构建速度会比Webpack 快，输出文件也会被压缩，并且样式代码也会被单独提取到单个文件中
在这里插入图片描述
可以感受到，Parcel给开发者一种很大的自由度，只管去实现业务代码，其他事情用Parcel解决

Snowpack

Snowpack，是一种闪电般快速的前端构建工具，专为现代Web设计，较复杂的打包工具（如Webpack或Parcel）的替代方案，利用JavaScript的本机模块系统，避免不必要的工作并保持流畅的开发体验

开发阶段，每次保存单个文件时，Webpack和Parcel都需要重新构建和重新打包应用程序的整个bundle。而Snowpack为你的应用程序每个文件构建一次，就可以永久缓存，文件更改时，Snowpack会重新构建该单个文件

下图给出webpack与snowpack打包区别：

在这里插入图片描述
在重新构建每次变更时没有任何的时间浪费，只需要在浏览器中进行HMR更新

Vite

vite ，是一种新型前端构建工具，能够显著提升前端开发体验

它主要由两部分组成：

  • 一个开发服务器，它基于 原生 ES 模块 提供了丰富的内建功能，如速度快到惊人的 [模块热更新HMR
  • 一套构建指令，它使用 Rollup打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源

其作用类似webpack+ webpack-dev-server，其特点如下：

  • 快速的冷启动
  • 即时的模块热更新
  • 真正的按需编译

vite会直接启动开发服务器，不需要进行打包操作，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快

利用现代浏览器支持ES Module的特性，当浏览器请求某个模块的时候，再根据需要对模块的内容进行编译，这种方式大大缩短了编译时间

原理图如下所示：

在这里插入图片描述
在热模块HMR方面，当修改一个模块的时候，仅需让浏览器重新请求该模块即可，无须像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高

#webpack

相比上述的模块化工具，webpack大而全，很多常用的功能做到开箱即用。有两大最核心的特点：一切皆模块和按需加载

与其他构建工具相比，有如下优势：

  • 智能解析：对 CommonJS 、 AMD 、ES6 的语法做了兼容
  • 万物模块：对 js、css、图片等资源文件都支持打包
  • 开箱即用：HMR、Tree-shaking等功能
  • 代码分割：可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间
  • 插件系统，具有强大的 Plugin 接口，具有更好的灵活性和扩展性
  • 易于调试：支持 SourceUrls 和 SourceMaps
  • 快速运行：webpack 使用异步 IO 并具有多级缓存，这使得 webpack 很快且在增量编译上更加快
  • 生态环境好：社区更丰富，出现的问题更容易解决

相关文章：

webpack基础知识十：与webpack类似的工具还有哪些？区别？

一、模块化工具 模块化是一种处理复杂系统分解为更好的可管理模块的方式 可以用来分割&#xff0c;组织和打包应用。每个模块完成一个特定的子功能&#xff0c;所有的模块按某种方法组装起来&#xff0c;成为一个整体(bundle) 在前端领域中&#xff0c;并非只有webpack这一款…...

编程日记 2023/8/8 11:02:16

分享kubernetes部署：基于Ansible自动安装kubernetes

基于Ansible自动安装kubernetes 环境准备 我们以如下机器环境为例&#xff1a; 开放端口&#xff1a; 控制平面节点 工作节点 请按如上中规定的开放端口&#xff0c;或关闭防火墙&#xff1a; systemctlstopfirewalld&&\ systemctldisablefirewalld 安装常用工具 sudo…...

编程日记 2023/8/8 11:01:15

【Kubernetes部署篇】基于Ubuntu20.04操作系统搭建K8S1.23版本集群

文章目录 一、集群架构规划信息二、系统初始化准备(所有节点同步操作)三、安装kubeadm(所有节点同步操作)四、初始化K8S集群(master节点操作)五、添加Node节点到K8S集群中六、安装Calico网络插件七、测试CoreDNS可用性 一、集群架构规划信息 pod网段&#xff1a;10.244.0.0/16…...

编程日记 2023/8/8 11:00:14

c++--二叉树应用

1.根据二叉树创建字符串 力扣 给你二叉树的根节点 root &#xff0c;请你采用前序遍历的方式&#xff0c;将二叉树转化为一个由括号和整数组成的字符串&#xff0c;返回构造出的字符串。 空节点使用一对空括号对 "()" 表示&#xff0c;转化后需要省略所有不影响字符…...

编程日记 2023/8/8 10:59:13

以太网DHCP协议(十)

目录 一、工作原理 二、DHCP报文 2.1 DHCP报文类型 2.2 DHCP报文格式 当网络内部的主机设备数量过多是&#xff0c;IP地址的手动设置是一件非常繁琐的事情。为了实现自动设置IP地址、统一管理IP地址分配&#xff0c;TCPIP协议栈中引入了DHCP协议。 一、工作原理 使用DHCP之…...

编程日记 2023/8/8 10:58:11

企业服务器器中了360后缀勒索病毒怎么解决，勒索病毒解密数据恢复

随着网络威胁的增加&#xff0c;企业服务器成为黑客攻击的目标之一。近期&#xff0c;上海某知名律师事务所的数据库遭到了360后缀的勒索病毒攻击&#xff0c;导致企业服务器内的数据库被360后缀勒索病毒加密。许多重要的数据被锁定无法正常读取&#xff0c;严重影响了企业的正…...

编程日记 2023/8/8 10:57:09

详解Kafka分区机制原理｜Kafka 系列 二

Kafka 系列第二篇&#xff0c;详解分区机制原理。为了不错过更新&#xff0c;请大家将本号“设为星标”。 点击上方“后端开发技术”&#xff0c;选择“设为星标” &#xff0c;优质资源及时送达 上一篇文章介绍了 Kafka 的基本概念和术语&#xff0c;里面有个概念是 分区(Part…...

编程日记 2023/8/8 10:56:08

CSS学习记录(基础笔记)

CSS简介: CSS 指的是层叠样式表* (Cascading Style Sheets)&#xff0c;主要用于设置HTML页面的文字内容&#xff08;字体、大小、对齐方式&#xff09;&#xff0c;图片的外形&#xff08;边框&#xff09; CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 CSS 节省…...

编程日记 2023/8/8 10:55:07

Chatgpt AI newbing作画，文字生成图 BingImageCreator 二次开发，对接wxbot

开源项目 https://github.com/acheong08/BingImageCreator 获取cookie信息 cookieStore.get("_U").then(result > console.log(result.value)) pip3 install --upgrade BingImageCreator import os import BingImageCreatoros.environ["http_proxy"]…...

编程日记 2023/8/8 10:54:06

PPT忘记密码如何解除？

PPT文件所带有的两种加密方式&#xff0c;打开密码以及修改权限&#xff0c;两种密码在打开文件的时候都会有相应的提示&#xff0c;但不同的是两种加密忘记密码之后是不同的。 如果忘记了打开密码&#xff0c;我们就没办法打开PPT文件了&#xff1b;如果是忘记了修改密码&…...

编程日记 2023/8/8 10:53:04

绘制曲线python

文章目录 import matplotlib.pyplot as plt# 提供的数据 x= [1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.1,2.2,2.3,2.4,2.5,2.6,2.7,2.8,2.9,3,3.1,3.2,3.3,3.4,3.5,3.6,3.7,3.8,3.9,4,4.1,4.2,4.3,4.4,4.5,4.6,4.7,4.8,4.9,5,5.1,5.2,5.3,5.4,5.5,5.6,5.7,5.8,5.9,6,6.1,6.2…...

编程日记 2023/8/8 10:52:03

CentOs 8 常见问题处理

CentOs 8 常见问题处理 vmware虚拟机新增网卡操作 vmware虚拟机新增网卡操作 [rootcentos ~]# ip add 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00inet 127.0…...

编程日记 2023/8/8 10:51:02

OpenAI将GPT-4设置为ChatGPT Plus付费用户的默认模型

OpenAI最近为ChatGPT引入了一系列新功能&#xff0c;这些更新旨在增强用户体验&#xff0c;提供更多指导和更多的功能。其中最显著的功能之一是将GPT-4设置为ChatGPT Plus付费用户的默认模型&#xff0c;这意味着付费订阅用户无需手动切换到其他公开可用的语言模型&#xff0c;…...

编程日记 2023/8/8 10:50:01

textarea 标签如何创建多行文本输入框？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ textarea 的写法⭐ 代码含义⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、…...

编程日记 2023/8/8 10:48:59

（15）Qt绘图（two）

目录 坐标变换 平移坐标轴 缩放坐标轴 旋转坐标轴 定时器加坐标轴旋转实现动画旋转 transform旋转&#xff08;可设置旋转轴&#xff09; 绕X轴旋转 绕Y轴旋转 绕Z轴旋转 错切 Y轴错切 X轴错切 画家的保存与坐标复原 基本图形绘制 绘制点 绘制线 绘制矩形 普…...

编程日记 2023/8/8 10:47:56

用队列实现栈——数据结构与算法

&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️ &#x1f4a5;个人主页&#xff1a;&#x1f525;&#x1f525;&#x1f525;大魔王&#x1f525;&#x1f525;&#x1f525; &#x1f4a5;代码仓库&#xff1a;&#x1f525;&#x1f525;魔…...

编程日记 2023/8/8 10:46:55

Python“牵手”1688商品详情页数据采集方法,1688API接口申请指南

1688详情接口 API 是开放平台提供的一种 API 接口&#xff0c;它可以帮助开发者获取商品的详细信息&#xff0c;包括商品的标题、描述、图片等信息。在电商平台的开发中&#xff0c;详情接口API是非常常用的 API&#xff0c;因此本文将详细介绍详情接口 API 的使用。 一、1688…...

编程日记 2023/8/8 10:45:54

记录第一篇被”华为开发者联盟鸿蒙专区 “收录的文章

记录第一篇被”华为开发者联盟鸿蒙专区 “社区收录的文章。 坚持写作的动力是什么&#xff1f; 是记录、分享&#xff0c;以及更好的思考 。...

编程日记 2023/8/8 10:44:54

jenkins的cicd操作

cicd概念 持续集成&#xff08; Continuous Integration&#xff09; 持续频繁的&#xff08;每天多次&#xff09;将本地代码“集成”到主干分支&#xff0c;并保证主干分支可用 持续交付&#xff08;Continuous Delivery&#xff09; 是持续集成的下一步&#xff0c;持续…...

编程日记 2023/8/8 10:43:51

【C++】异常exception

文章目录 1. C语言中传统的处理错误方法2. C中的异常3. 异常的使用3.1 异常的抛出和捕获3.2 异常的重新抛出3.3 异常安全3.4 异常规范 4. 自定义异常体系5. 异常的优缺点 &#x1f4dd; 个人主页 &#xff1a;超人不会飞)&#x1f4d1; 本文收录专栏&#xff1a;《C的修行之路》…...

编程日记 2023/8/8 10:42:50

猫抓扩展完整指南：三步掌握浏览器视频嗅探与下载技巧

猫抓扩展完整指南&#xff1a;三步掌握浏览器视频嗅探与下载技巧 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 猫抓&#xff08;Cat-Catch&#…...

编程新知 2026/5/17 7:51:55

SyntaxUI：基于原子设计与Web组件的现代UI库开发实践

1. 项目概述&#xff1a;一个为开发者而生的现代UI组件库 如果你是一名前端开发者&#xff0c;或者正在构建一个需要用户界面的应用&#xff0c;那么你肯定经历过这样的场景&#xff1a;为了一个按钮的样式、一个表格的交互&#xff0c;或者一个模态框的动画&#xff0c;反复在…...

编程新知 2026/5/17 7:47:53

OpenClaw 小龙虾智能体联动 DeepSeek 大模型部署实操攻略

前置准备 获取小龙虾open claw一键安装包&#xff08;www.totom.top&#xff09;并安装电脑端已成功安装并正常启动OpenClaw&#xff0c;右上角 Gateway 状态显示在线设备网络通畅&#xff0c;可正常访问 DeepSeek 开放平台拥有可接收验证码的手机号 / 微信&#xff0c;用于平…...

编程新知 2026/5/17 6:57:20

企业级后端四层架构实战：从理论到代码的清晰落地

1. 项目概述&#xff1a;一个四层架构的实战蓝图最近在GitHub上看到一个挺有意思的项目&#xff0c;叫BTawaifi/four-layer-system。光看名字&#xff0c;你可能会觉得这又是一个老生常谈的“四层架构”理论教程&#xff0c;无非是Controller、Service、Repository那套东西。但…...

编程新知 2026/5/17 6:08:25

开源提示词管理工具：本地化部署与AI工作流效率提升实践

1. 项目概述&#xff1a;一个为AI工作流设计的提示词管理利器如果你和我一样&#xff0c;每天都在和ChatGPT、Claude、Midjourney这些AI模型打交道&#xff0c;那你一定有过这样的烦恼&#xff1a;昨天精心调试好的、能稳定输出高质量代码的提示词&#xff0c;今天想用的时候&a…...

编程新知 2026/5/17 4:51:21

Chrome 扩展 uMatrix 被弃用，MV3 环境下 matrix³ 原型尝试实现其功能

Chrome 扩展 uMatrix 被弃用&#xff0c;MV3 环境下如何实现其功能&#xff1f;matrix 原型来尝试 曾经有一款很棒的 Chrome 扩展程序叫 uMatrix&#xff0c;它由 uBlock Origin 的开发者 Raymond Hill 编写&#xff0c;是一种直观控制网站权限和子资源请求的工具。 它看上去是…...

编程新知 2026/5/17 3:24:44

小米汽车Q3真车现身：科技巨头跨界造车的技术路径与市场挑战

1. 项目概述&#xff1a;从“Q3真车现身”看小米汽车的阶段性成果最近&#xff0c;小米汽车项目代号“Q3”的测试车辆在公开道路上被频繁捕获&#xff0c;这已经不是简单的谍照&#xff0c;而是接近量产状态的“真车”现身。作为一名长期关注汽车产业变革&#xff0c;特别是科技…...

编程新知 2026/5/17 2:56:00

Arm Neoverse CMN-700架构与寄存器配置详解

1. Arm Neoverse CMN-700架构概览在现代多核处理器设计中&#xff0c;如何高效实现缓存一致性一直是核心挑战。Arm Neoverse CMN-700&#xff08;Coherent Mesh Network&#xff09;作为第二代一致性网格网络IP&#xff0c;采用分布式架构解决了从16核到256核规模的数据一致性问…...

编程新知 2026/5/17 2:37:01

ESP-SR深度解析：嵌入式语音识别系统的架构设计与性能优化实战指南

ESP-SR深度解析&#xff1a;嵌入式语音识别系统的架构设计与性能优化实战指南 【免费下载链接】esp-sr Speech recognition 项目地址: https://gitcode.com/gh_mirrors/es/esp-sr 在物联网设备智能化浪潮中&#xff0c;语音交互已成为人机交互的重要入口。ESP-SR作为乐鑫…...

编程新知 2026/5/17 1:22:23

1987年4月26日中午11-13点出生性格、运势和命运

在1987年4月26日中午11 - 13点出生的人&#xff0c;正处于火兔年的特定时段。从性格层面来看&#xff0c;这一时间段出生者往往有着热情似火且积极向上的特质。他们如同正午炽热的阳光&#xff0c;充满活力与冲劲&#xff0c;对生活始终保持着乐观的态度&#xff0c;面对困难时…...

编程新知 2026/5/17 1:20:07