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

【高频考点精讲】前端构建工具对比：Webpack、Vite、Rollup和Parcel

news 来源：原创 2025/6/23 1:44:03

前端构建工具大乱斗：Webpack、Vite、Rollup和Parcel谁是你的菜？

【初级】前端开发工程师面试100题（一）
【初级】前端开发工程师面试100题（二）
【初级】前端开发工程师的面试100题（速记版）

最近在后台收到不少同学提问：“老李啊，现在前端构建工具这么多，我该选哪个？” 今天咱们就来好好唠唠这个话题。我是全栈老李，一个在代码江湖摸爬滚打多年的老司机，今天带大家深入浅出分析这四大金刚的优劣。

构建工具是啥？为啥需要它？

想象一下你是个大厨（前端工程师），现在要准备一桌满汉全席（前端项目）。原材料（源代码）有了，但直接端上桌肯定不行——需要切配、腌制、烹饪（转译、打包、压缩）。构建工具就是你的厨房设备，帮你自动化完成这些繁琐工序。

举个真实例子：你写了个React组件用了ES6+语法和SCSS，但浏览器老古董IE11可不认这些。构建工具就能帮你把代码"翻译"成浏览器能懂的语言。

四大金刚轮番登场

1. Webpack - 老牌劲旅

Webpack就像瑞士军刀，啥都能干但有点重。它采用bundle模式，把所有资源都看作模块，通过loader和plugin系统处理各种文件类型。

// webpack.config.js - 全栈老李配置示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js', // 入口文件output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test

【高频考点精讲】前端构建工具对比：Webpack、Vite、Rollup和Parcel

前端构建工具大乱斗：Webpack、Vite、Rollup和Parcel谁是你的菜？【初级】前端开发工程师面试100题（一）【初级】前端开发工程师面试100题（二）【初级】前端开发工程师的面试100题（速记版）最近在后台收到不少同学提问：“老李啊，现在前端构建工具这么多，我该选哪个？…...

编程日记 2025/6/23 1:44:03

牛客小白月赛115-B题：签到题

题目传送门牛客网竞赛题目一、题目描述给定n道题目，每道题难度为aᵢ。要从中选出m道题组成比赛，使得难度最低的题目（签到题）数量尽可能多。求签到题的最大可能数量。输入： 第一行两个整数n,m(1≤m≤n≤210⁵)第…...

编程日记 2025/6/20 22:30:33

【QQMusic项目复习笔记——音乐管理模块详解】第四章

🌹 作者: 云小逸 🤟 个人主页: 云小逸的主页 🤟 motto: 要敢于一个人默默的面对自己，强大自己才是核心。不要等到什么都没有了，才下定决心去做。种一颗树，最好的时间是十年前，其次就是现在&…...

编程日记 2025/6/2 7:01:11

IPv6 技术细节 | 源 IP 地址选择 / Anycast / 地址自动配置 / 地址聚类分配

注：本文为 “IPv6 技术细节” 相关文章合集。部分文章中提到的其他文章，一并引入。略作重排，未整理去重。如有内容异常，请看原文。闲谈 IPv6 - 典型特征的一些技术细节 iteye_21199 于 2012-11-10 20:54:00 发布 0. 巨大的…...

编程日记 2025/6/23 6:25:33

代码随想录算法训练营day11（二叉树）

华子目录翻转二叉树思路对称二叉树思路二叉树的最大深度思路翻转二叉树 https://leetcode.cn/problems/invert-binary-tree/description/ 思路采用递归的思路可以前序遍历和后序遍历，不能使用中序遍历 # Definition for a binary tree node. # class TreeNo…...

编程日记 2025/6/21 18:46:10

A Comprehensive Survey of Spoken Language Models

语音大语言模型（Spoken Language Model, SLM）正在引领人工智能领域的新一轮革新浪潮。正如文本自然语言处理从任务特定模型迈向通用大语言模型的演进，语音领域也正在经历类似转型。为填补该领域系统性综述的空白，芝加哥大学、卡…...

编程日记 2025/5/31 17:21:11

深入解析 SMB 相关命令：smbmap、smbclient、netexec 等工具的使用指南

Server Message Block（SMB）协议是广泛应用于文件共享、打印机共享和进程间通信的网络协议，尤其在 Windows 环境中常见。渗透测试和网络安全审计中，SMB 是一个重要的攻击面，相关工具如 smbmap、smbclient 和 netexec 提…...

编程日记 2025/6/21 11:44:41

伊克罗德信息亮相亚马逊云科技合作伙伴峰会，以ECRobot 智能云迁移助手在GenAI Tech Game比赛勇夺金牌！

十年同行，共赴盛会：伊克罗德信息亮相2025亚马逊云科技Partner Summit 2025亚马逊云科技合作伙伴峰会（AWS Partner Summit）于乌镇盛大启幕，这场全球云计算领域的顶级盛会汇聚了亚马逊云科技全球核心合作伙伴、行业领袖与…...

编程日记 2025/5/29 5:20:41

【蓝桥杯】P12165 [蓝桥杯 2025 省 C/Java A] 最短距离

最短距离题目描述在一条一维的直线上，存在着 n n n 台显示器和 n n n 个电源插座。老师给小蓝布置了个任务：负责将每台显示器通过电源线与一个插座相连接（每个插座最多只能给一台显示器供电）；同时，老…...

编程日记 2025/6/22 1:20:04

深入浅出Sentinel：分布式系统的流量防卫兵

引言在当今的微服务架构和分布式系统中，服务间的依赖关系错综复杂，一个服务的故障可能会像多米诺骨牌一样引发整个系统的崩溃。如何有效地保护系统免受突发流量、不稳定依赖服务的影响，成为每个架构师和开发者必须面对的挑战。今天&#xf…...

编程日记 2025/6/22 13:11:35

vite+vue2+elementui构建之 vite.config.js

webpack版本太低，构建依赖太多，头大。各种查阅资料，弄了一份直通构建vite构建elementUi核心文件， 构建基于开源若依vue2vue3版本改造，感谢开源，感谢若依。 package.json 地址 vitevue2elementui构建之…...

编程日记 2025/5/29 14:28:48

【Pandas】pandas DataFrame radd

Pandas2.2 DataFrame Binary operator functions 方法描述DataFrame.add(other)用于执行 DataFrame 与另一个对象（如 DataFrame、Series 或标量）的逐元素加法操作DataFrame.add(other[, axis, level, fill_value])用于执行 DataFrame 与另一个对象&…...

编程日记 2025/6/22 23:35:04

Java 后端开发环境安装

Java环境安装 1. 安装程序 Java1.8下载，由于官网下载需要登录，比较麻烦，所以我将安装文件放到了我的资源中，大家通过资源直接下载即可 jdk-8u351-windows-x64.exe 大家根据自己的电脑的配置选择适当的版本然后一路下一步这里…...

编程日记 2025/6/20 13:41:57

Azure Data Factory ETL设计与调度最佳实践

一、引言在Azure Data Factory (ADF) 中，调度和设计ETL（抽取、转换、加载）过程需要综合考量多方面因素，以确保数据处理高效、可扩展、可靠且易于维护。以下将详细介绍相关关键考虑因素、最佳实践，并辅以具体示例说明…...

编程日记 2025/6/22 20:42:43

【Mybatis】MyBatisPlus的saveBatch真的是批量插入吗？深度解析与性能优化

前言在使用MyBatis-Plus进行批量数据插入时，许多开发者会发现：即使调用saveBatch方法，数据库仍会产生大量INSERT语句。本文将深入源码揭示背后的真相，并提供3种性能优化方案，让你的批量插入速度提升10倍！…...

编程日记 2025/6/20 13:41:57

图像预处理-图像亮度变换

一.亮度变换首先有两个关联的说法： 亮度调整：像素强度整体变高或者变低。对比度调整：暗处像素强度变低，亮处像素强度变高，从而拉大中间某个区域范围的显示精度。 opencv中操作这两种变换的公式为： 对比…...

编程日记 2025/6/19 23:10:57

基于AI应用创业IDEA：使用百度搜索开放平台的MCP广场智能推荐MCPServices服务

基于AI应用创业IDEA：使用百度搜索开放平台的MCP广场智能推荐MCPServices服务在当今快速发展的技术时代，人工智能（AI）已经成为推动各行各业创新的关键力量。特别是在创业领域，AI技术不仅能够帮助提升产品性能&#xf…...

编程日记 2025/6/21 18:15:23

URP-利用矩阵在Shader中实现物体的平移和缩放

一、平移方法一： v.positionOS.xyz _Translate.xyz; 方法二： 利用矩阵实现平移： 二、缩放方法一： v.positionOS.xyz * _Scale.xyz*_Scale.w; _Scale.w实现全局缩放方法二： Shader"unity/Translation"…...

编程日记 2025/6/21 8:35:32

跟着尚硅谷学vue-day5

计算属性和watch监视一.姓名案例 1.姓名案例-插值语法 <div id"root">姓：<input type"text" value"张" v-model"firstname"><br/><br/>名：<input type"text" value&q…...

编程日记 2025/6/4 7:48:34

猫咪如厕检测与分类识别系统系列【十三】猫咪进出事件逻辑及日志优化【下】

前情提要家里养了三只猫咪，其中一只布偶猫经常出入厕所。但因为平时忙于学业，没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关，频繁如厕可能是泌尿问题，停留过久也可能是便秘或不适。为了更科学地了解牠的如…...

编程日记 2025/5/28 16:02:44

【Java学习笔记】冒泡排序

冒泡排序思想：经过一轮遍历比较，把最大的放在数组的末尾 int[] a {3, 2, 1}; for( int i 0; i < a.length-1; i){for( int j 0; j < a.length-1-i; j){if(a[j] > a[j1]){int temp a[j];a[j] a[j1];a[j1] temp;}} } for( int i 0; i &…...

编程日记 2025/6/21 23:31:09

【含文档+PPT+源码】基于微信小程序的校园快递平台

项目介绍本课程演示的是一款基于微信小程序的校园快递平台，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统 3.该项目附带…...

编程日记 2025/5/31 1:53:19

Vue3 自定义指令完全指南

Vue3 自定义指令完全指南目录基本概念指令注册方式常用应用场景注意事项基本概念在Vue3中，自定义指令是用于直接操作DOM的重要工具。相比Vue2，Vue3的指令系统进行了优化和简化。生命周期钩子钩子名称对应Vue2名称触发时机createdbind元素属性…...

编程日记 2025/6/22 21:13:11

神经辐射场（NeRF）技术解析：3D重建与虚拟世界的未来

神经辐射场（NeRF）技术解析：3D重建与虚拟世界的未来 ——从算法突破到元宇宙基础设施的演进之路摘要本文通过算法演进图谱、训练流程解析、PyTorch代码实战及产业应用洞察，构建从学术创新到工程落地的完整技术框架。实验数据显…...

编程日记 2025/5/28 23:08:17

050_基于springboot的音乐网站

编程日记 2025/6/2 2:39:22

Django之旅：第七节--模版继承

定义母版—new.html <!DOCTYPE html> <html lang"en"><head></head><body><div>{% block contents %}{% endblock %}</div></body> </html> 继承母模板 {% extends new.html %} {% block contents %}&…...

编程日记 2025/6/23 6:31:47

Windows 10 上运行 Ollama 时遇到 llama runner process has terminated: exit status 2

在 Windows 10 上运行 Ollama 时遇到 llama runner process has terminated: exit status 2 错误，可能是由多种原因引起的。以下是逐步解决方案： 1. 检查 Ollama 服务状态按 Win R 输入 services.msc，找到 Ollama 服务，确保其状…...

编程日记 2025/6/20 16:47:18

基于 Python（selenium）的百度新闻定向爬虫：根据输入的关键词在百度新闻上进行搜索，并爬取新闻详情页的内容

该项目能够根据输入的关键词在百度新闻上进行搜索，并爬取新闻详情页的内容。一、项目准备 1. 开发环境配置操作系统：支持 Windows、macOS、Linux 等主流操作系统，本文以 Windows 为例进行说明。Python 版本：建议使用 Python 3.8 及以上版本，以确保代码的兼容性和性能。…...

编程日记 2025/6/3 13:27:35

YOLOX-PAI手部检测模型 # numpy > 1.20 from modelscope.pipelines import pipeline from modelscope.utils.constant import Tasksmodel_id iic/cv_yolox-pai_hand-detection hand_detection pipeline(Tasks.domain_specific_object_detection, modelmodel_id) output …...

编程日记 2025/6/21 23:30:49

速成GO访问sql，个人笔记

更多个人笔记：（仅供参考，非盈利） gitee： https://gitee.com/harryhack/it_note github： https://github.com/ZHLOVEYY/IT_note 本文是基于原生的库 database/sql进行初步学习基于ORM等更多操作可以关注我…...

编程日记 2025/6/23 6:46:10

SkyWalking 安装与使用详细总结

SkyWalking 是一款开源的分布式应用性能监控（APM）系统，用于监控微服务、云原生应用、容器等。它支持服务跟踪、性能监控、日志分析和数据可视化。以下是 SkyWalking 的安装与使用详细步骤。一、SkyWalking 安装 1. 下载 SkyWalking 访问 …...

编程日记 2025/6/23 6:31:46

产业观察：中国商飞2025.4.25

一.中国商飞简介 1.1 公司背景中国商飞于 2008年5月11日在上海成立，是实施国家大型飞机重大专项中大型客机项目的主体。公司由多家国有大型企业共同出资组建，包括国务院国资委、上海国盛集团、中航工业集团等。总部设在上海，拥有多个研发…...

编程日记 2025/6/20 22:13:02

【爬虫】DrissionPage-获取douyim用户下的视频

之前看过DrissionPage，觉得很厉害，比selenium简单，适合新手。因为盲目跟风逆向，今天看了一个DrissionPage案例直播，学习一下，真香哈。 DrissionPage官网：🛰️ 概述 | DrissionPage官…...

编程日记 2025/5/30 18:42:19

Kubernetes 节点 Not Ready 时 Pod 驱逐机制深度解析（下）

#作者：邓伟文章目录三、深度解析：源码逻辑与调优策略四、常见问题与排查五、最新动态与技术演进总结三、深度解析：源码逻辑与调优策略 TaintManager 核心源码逻辑 （1）参数定义（kube-controller-manage…...

编程日记 2025/6/21 22:41:58

markdown自动标题序号，标题序号，目录处理

在vscode下有插件 markdown aheads markdown标题与目录处理插件。使用方法：在vscode中 ctrlshiftp 输入 AHeads 选择功能。包含以下功能： "AHeads:AddIndex": "添加标题序号" "AHeads:RemoveIndex": "移除标题…...

编程日记 2025/6/23 6:19:54

模式设计简介

设计模式简介设计模式是软件开发中经过验证的最佳实践解决方案，它是针对特定问题的通用解决方案，能够帮助开发者提升代码的可维护性、可扩展性和复用性。设计模式并非具体的代码实现，而是一种解决问题的思路和方法论，它源于大量的实践经验总结，旨在解决软件开发过程中反…...

编程日记 2025/6/21 15:37:32

Linux字符设备驱动开发的详细步骤

1. 确定主设备号手动指定：明确设备号时，使用register_chrdev_region()静态申请（需确保未被占用）。动态分配：通过alloc_chrdev_region()由内核自动分配主设备号（更灵活，推…...

编程日记 2025/6/22 5:46:04

融合注意力机制和BiGRU的电力领域发电量预测项目研究，并给出相关代码

大家好，我是微学AI，今天给大家介绍一下融合注意力机制和BiGRU的电力领域发电量预测项目研究，并给出相关代码。文章目录一、项目背景二、融合注意力机制和BiGRU的技术原理（一）双向门控循环单元（BiGRU&…...

编程日记 2025/6/22 10:17:40

基于 Netmiko 的网络设备自动化操作

学习目标掌握 Netmiko 库的核心功能与使用场景。能够通过 Netmiko 连接多厂商设备并执行命令和配置。实现批量设备管理、配置备份与自动化巡检。掌握异常处理、日志记录与性能优化技巧。理解 Netmiko 在自动化运维体系中的角色。 1. Netmiko 简介 1.1 什么是 Netmiko Netmi…...

编程日记 2025/6/23 6:18:30

eclipse怎么导入junit4

JUnit 4 是 Java 编程语言里常用的单元测试框架，在 Eclipse 中导入 JUnit 4 可按以下步骤操作： 1. 新建或打开 Java 项目如果你已经有一个 Java 项目，可直接打开它；若没有，就新建一个 Java 项目。操作步骤如下&…...

编程日记 2025/5/28 4:07:40

深入理解C语言函数之模拟实现strcpy()strcat()

文章目录前言一、strcpy的模拟实现二、strcat的模拟实现总结前言前面我们用三种方法模拟实现了一下strlen，所以这篇文章模拟实现以下strcpy（）strcat（） 一、strcpy的模拟实现首先我们去官网找到strcpy的用法和原…...

编程日记 2025/6/23 6:43:22

[mysql]窗口函数

目录窗口函数: 为何要学习窗口函数,与mysql5.7实现语句对比现在我们介绍一下窗口函数: 函数规则 1序号函数 2分布函数 3前后函数 5其他函数总结窗口函数: 首先数据库的迁移是非常慢的,大家学习新特性的时候要考虑自己公司的数据库版本是不是和自己学习的吻合为何…...

编程日记 2025/6/20 19:24:26

IT人力外包定义-优势-服务流程介绍

IT人力外包：企业灵活用工的“技术人才蓄水池” 在数字化转型的浪潮中，企业对IT人才的需求日益增长，但招聘、培养和管理技术团队的成本和风险也随之攀升。此时，IT人力外包应运而生，成为企业高效获取技术资源的解决方案…...

编程日记 2025/5/29 5:20:47

Cancer Cell｜scRNA-seq + scTCR + 空间多组学整合分析，揭示CD8⁺ T细胞在免疫治疗中的“双路径” | 临床问题的组学解答

Cancer Cell｜scRNA-seq scTCR 空间多组学整合分析，揭示CD8⁺ T细胞在免疫治疗中的“双路径” 👋 欢迎关注我的生信学习专栏~ 如果觉得文章有帮助，别忘了点赞、关注、评论，一起学习近日，《Cancer Cell》…...

编程日记 2025/6/20 23:00:55

数字人民币杠杆破局预付乱象 XBIT智能合约筑牢资金安全防线

在加密货币市场与实体经济加速融合的当下，数字人民币试点工作正以创新姿态突破传统金融边界。青岛、广州、厦门等地近期密集落地的数字人民币智能合约应用，为预付式消费领域资金监管难题提供了破局方案，而XBIT去中心化交易所平台凭借其技术优…...

编程日记 2025/6/1 16:17:52

React.memo 和 useMemo

现象 React 中，通常父组件的某个state发生改变，会引起父组件的重新渲染（和其他state的重新计算），从而会导致子组件的重新渲染（和其他非相关属性的重新计算） 问题一：如何避免因为某个…...

编程日记 2025/5/29 18:35:32

命令行指引的尝试

效果步骤首先初始化一个空的项目，然后安装一些依赖 npm init -y npm install inquirer execa chalk ora至于这些依赖是干嘛的，如下图所示： 然后再 package.json 中补充一个 bin 然后再根目录下新建一个 index.js , 其中的内容如下 #!/…...

编程日记 2025/6/4 5:42:23

《深入理解计算机系统》阅读笔记之第三章程序的机器级表示

概述历史观点程序编码数据格式访问信息操作数指示符数据传送指令压入和弹出栈数据算术和逻辑操作小结本章没有细看，其中主要以C语言中的一些汇编等知识来做介绍。算是一种对C语言的相关底层知识的详细介绍吧。但是从原理上理解我觉得《编码》这本书更好理…...

编程日记 2025/5/29 18:15:30

解析excel中的图片

解析excel中的图片前言一、pom依赖二、使用步骤1.示例数据2.代码如下（示例）： 总结前言初始化数据是，需要将excel中的数据解析并插入数据库。但是某几列存放的是图片，这时候怎么办呢。主要解决的是：获…...

编程日记 2025/6/21 1:42:03

红队系列-网络安全知识锦囊-CTF(持续更新)

CTF CTF系列-AWD专题篇CTF-比赛培训基础1 CTF 介绍HTTP协议分析进阶001.CTF简介_宽字节注入高级 2018CTF——黑客大赛特训CTF-PWNPWNCTF竞赛中的主要题型之一了解CTF Capture The Flag 夺旗描述：# gets从标准输入设备读字符串函数#下面是对main函数中的汇编代码的解释：modifi…...

编程日记 2025/6/21 1:44:51

前端构建工具大乱斗：Webpack、Vite、Rollup和Parcel谁是你的菜？

构建工具是啥？为啥需要它？

四大金刚轮番登场

1. Webpack - 老牌劲旅

相关文章：