随笔 - 148  文章 - 0  评论 - 13  阅读 - 21万

webpack 是什么 ?

什么是webpack ?

webpack 是一种前端构建工具,前端静态资源打包工具。
webpack 是以入口文件开始递归便利所有依赖,生成一个静态依赖图 - chunk文件。 再通过不同的loader对 文件进行编译处理,最终生成一个bundle文件输出。

为什么要使用webpack ?

复杂的JavaScript代码和一大堆依赖包, 原来 原生阶段,通过script标签引入,有时一个依赖 依赖另外一个依赖,直接引入方式会导致项目混乱不堪,而且都是暴露的全局变量,容易造成全局变量污染。
所以为了简化开发,前端社区涌现出了很多好的实践方法。模块化开发(CMD,requerejs,ES6模块化)等,typescript 扩展js功能, sass 作为css预处理器。
这些改进能大大提升我们的开发效率,但是利用它们进行开发往往需要进行额外的处理才能让浏览器识别,而手动处理又非常繁琐。所以就为webpack等构件打包工具的出现提供了需求。

webpack 的特点,优点 ?

基础入口文件的:webpack会基于入口文件进行静态资源分析和和打包。所以一般单页面应用就一个入口文件,多页面应用需要配置多个入口文件。
基于模块化的:webpack看来,所有的文件都是模块化的文件。这样的好处是能清晰的描述出各个模块之间的依赖关系,以方便webpack对模块进行组合和打包。经过webpack的处理,最终会输出浏览器能使用的静态资源。

Webpack的优点是:
专注于处理模块化的项目,能做到开箱即用一步到位;
通过 Plugin 扩展,完整好用又不失灵活;
使用场景不仅限于 Web 开发;
社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展;
良好的开发体验。

webpack 和 grunt、gulp、rollup,parcel比较

webpack、grunt、gulp 比较 :
grunt、gulp 是基于任务的方式处理文件的,webpack是基于入口文件,通过递归遍历所有引用的静态资源的。
grunt、gulp 的集中度不高,需要写很多配置文件才可以用,无法做到像webpack那样开箱即用。在功能上,灵活性上,处理es6模块化上webpack都有一定的优势。

webpack 和 rollup 、 parcel 比较
首先共同点:三个都是基于入口文件进行打包的。
webpack 为处理资源管理和分割代码而生,可以包含任何类型的文件。灵活,插件多。
ollup:用标准化的格式(es6)来写代码,通过减少死代码尽可能地缩小包体积。
parcel:超快的打包速度,多线程在多核上并发编译,不用任何配置。

一般经验上:对于复杂有很多依赖的应用使用 webpack进行打包,对于类库使用 Rollup打包,对于功能简单的应用可以使用小而美的parcel进行打包。

posted on   长安城下翩翩少年  阅读(831)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示