前端打包webpack &vite

原创 已于 2024-04-15 16:31:01 修改 · 347 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #webpack #node.js

于 2024-04-15 16:28:05 首次发布
本文介绍了Webpack中文文档的使用方法，包括创建webpack-demo项目、配置基本命令，同时提到了Vite作为快速上手Vue.js开发的替代方案。
kevin_cat
关注
前端面试webpack & vite
lucky_jiexia的博客
04-12 1037
webpack构建流程。
构建工具webpack&vite
2301_80480494的博客
07-11 833
3.webpack是打包工具是给node看的，配置文件(webpack.config.js)这里要遵循。本质上 Vite 和 Webpack 是打包工具，只是 Webpack 比较底层，需要自己手动去配置。2.yarn add -D webpack-dev-server安装webpack的一个开发服务器。4.webpack会遍历代码判断代码会不会执行，只有会执行的代码才会被打包进main.js。1.开发时，并不对代码打包，而是直接采用**ESM（ES模块）**的方式来运行项目。
Webpack & Vite 前端高频面试题
涂涂
03-11 2800
🔥 什么是热更新（HMR - Hot Module Replacement）？热模块替换（Hot Module Replacement, HMR）是前端开发中的一个优化机制，它允许在代码修改后不刷新整个页面，只更新变化的模块，从而加快开发效率，保持应用状态不丢失。🔥 Vite 的 HMR vs Webpack 的 HMRVite HMR原理利用浏览器原生 ESM，按需更新模块基于 WebSocket 监听变化，触发更新编译方式依赖ESBuild，即时编译速度快使用。
前端构建工具（webpack&vite）
yuanmenglxb2004的博客
07-10 1268
src 是把所有的源码放在了这个src 里面。我们使用打包工具的前提是这个项目得是一个node项目，所以我们在使用webpack要先把项目初始一下,会出现一个package.json,初始化就完事了。然后就安装依赖. -D表示的是开发依赖，区分一下是开发的时候要用的还是运行的时候要用的。然后再项目中创建src 目录，然后编写代码，index.js是默认主目录，是入口文件。然后执行‘’yarn webpack 来对代码进行打包，打包好观察dist目录。dist目录就是打包后的版本。
Webpack&Vite总结篇与进阶
警警的博客
05-13 483
打包优化资源管理和环境注入老版本webpack插件：代码优化plugin：mini-css-estract-plugin（提取）、compression-webpack-plugin（压缩文件）、terser-webpack-plugin(压缩js代码）、cssMinizer（压缩css）、split-chunk-plugin（分割）
webpack & vite 原理对比
weixin_42538281的博客
05-16 1251
vite 在，在生产环境中，采用了rollup进行打包。而在开发中是一个基于浏览器原生 ES Modules 的开发服务器。利用浏览器去解析模块，在服务器端按需编译返回，跳过了打包这个概念，解决了webpack在大型项目中启动慢的问题。 1.服务器启动对比 使用webpack这类基于打包方式的启动，需要将所有模块打包成一个或多个bundle，交给服务器运行，如下图所示 而vite，一个基于浏览器原生 ES Module 的开发服务器。利用浏览器去解析模块，只有用到的模块，才会加载进来，没有用到模块，不会参
前端打包工具webpack和Vite
CandiceYu的博客
10-25 5003
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代.
前端打包工具——webpack和vite
kaisersama__的博客
06-20 873
Vite在开发阶段利用浏览器原生ES模块加载，实现即时热更新；在生产环境下会进行代码压缩和预构建优化。
前端工程化&&Webpack 和 Vite 的区别
W1192931158的博客
04-28 935
前端工程化是指通过工具、流程和规范，将前端开发从手工模式转向自动化、标准化和可维护的模式。链接：https://juejin.cn/post/7497875309002866698。：Vite 是未来趋势，但 Webpack 仍是老大哥！：对旧浏览器支持有限，生态不如 Webpack 成熟。目标是提升开发效率、代码质量和团队协作能力。：开发体验极佳，启动快，适合现代前端项目。：生态强大，适合大型复杂项目。：启动和热更新慢，配置复杂。Webpack 是一个。
webpack&vite 前端构建工具源码
05-04
本主题将深入探讨两款主流的前端构建工具——Webpack和Vite，它们都是基于Node.js的工具，用于处理和打包JavaScript应用。我们将从源码角度来理解它们的工作原理和各自的特点。 **Webpack** Webpack 是一个模块打包...
前端构建工具——Webpack和Vite的主要区别
林啾啾的博客
02-17 945
前端构建工具——Webpack和Vite的主要区别
轻装上阵：Webpack 5 & Vite资源优化
m0_46259935的博客
05-05 1021
本文通过一个最小的Webpack和vite项目demo，举例演示了在webpack5中采用内置属性将静态资源模块以不同形式导出，并且说明了在vite中如何处理静态资源模块。
前端性能优化实战：从 Webpack 到 Vite 的全栈提速方案
weimengen的博客
04-10 1533
本文聚焦前端性能优化，解析从 Webpack 到 Vite 的升级方案。分析 Webpack 在打包速度、配置等方面的瓶颈，阐述 Vite 在开发、构建、SSR 等场景的优势。通过实战迁移指南与性能对比，展现其高效特性，助力全栈提速。
webpack和vite的区别
secketl的博客
06-02 1493
Webpack与Vite是当前主流的前端构建工具，二者在构建原理和性能表现上存在显著差异。Webpack采用传统打包式构建，依赖复杂配置和loader处理，适合大型复杂项目；而Vite基于ES模块实现按需加载，开发阶段冷启动极快，热更新近乎无延迟，配置更简洁，特别适合现代框架和新项目开发。Webpack生态成熟但学习成本高，Vite开发体验优越但复杂场景支持有限。选择时需权衡项目规模、开发效率和构建需求，Vite正逐渐成为新项目的首选工具。
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 724
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
50、【Ubuntu】【Gitlab】拉出内网 Web 服务：http.server 单/多线程分析（二）
HIT_Weston的博客
12-04 1253
本文分析了Python的http.server模块在单线程和多线程模式下的性能表现。通过测试发现，单线程模式下（Python<3.7）并发请求会被阻塞，后发请求需要等待前一个请求完成；而多线程模式下（Python≥3.7）可以同时处理多个请求。作者通过slow_server.py脚本模拟耗时操作，使用time curl命令测试响应时间，验证了线程模型的差异。文章还指出Python 3.7是一个重要分水岭，官方将默认命令行服务器升级为多线程以提升用户体验。技术细节参考了CPython源码，并提供了Git
47、【Ubuntu】【Gitlab】拉出内网 Web 服务：Nginx 事件驱动分析（一）
HIT_Weston的博客
12-01 1261
本文分析了Python的http.server模块与Nginx在Web服务架构上的本质区别。作者指出http.server仅适用于开发测试，而GitLab等完整Web应用需要Nginx的高性能架构。重点阐述了Nginx的事件驱动模型：通过epoll实现异步非阻塞I/O，单线程可处理上万并发连接，避免了传统多线程的资源消耗。文章还展示了Nginx的C语言伪代码实现逻辑，说明其"不轮询、无阻塞、仅处理活跃连接"的核心机制。最后预告将继续深入分析Nginx配置优化等内容。
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 1100
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
前端仿真驱动创新：西门子FLOEFD的行业价值与应用指南
最新发布
anscos的博客
12-05 747
西门子Simcenter FLOEFD作为嵌入CAD的CFD解决方案，精准击中了现代研发“高效迭代、精准预判”的核心需求，其技术革新与应用实践为多行业带来了研发模式的重构，成为高端装备设计不可或缺的核心工具。西门子FLOEFD以“CAD原生、智能高效、多场协同”为核心，打破了设计与仿真的壁垒，尤其适配新能源、电子、增材制造等快速迭代的行业。其价值不仅在于缩短研发周期、降低试验成本，更在于推动工程师将“仿真思维”融入设计全流程，实现从“经验驱动”到“数据驱动”的转型。
webpack和vite打包的区别
06-02
Webpack和Vite都是前端项目的打包工具，但是它们在打包方式和性能上有一些区别。 Webpack是一个功能强大的打包工具，它可以处理各种复杂的依赖关系、代码分割、懒加载等功能，但是在启动和打包速度上较慢，因为它需要分析整个项目的依赖关系。 Vite是一个新型的打包工具，它采用了基于ES模块的开发模式，通过按需编译和预构建的方式来实现快速启动和打包，可以在开发模式下实现秒级热更新，同时也可以在生产模式下进行高效的打包。 总的来说，如果项目依赖关系比较复杂、代码量比较大，建议使用Webpack；如果项目比较小、简单，或者需要快速启动和打包，建议使用Vite。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值