webpack_前端博客-专业IT技术发表平台

推荐付费专栏 VIP文章

weixin_724849599

Webpack vs Vite：深度对比与实战示例，如何选择最佳构建工具？在现代前端开发中，构建工具至关重要，能直接影响开发效率和项目性能。Webpack 曾经是前端构建的事实标准，但随着前端生态的变化，Vite 作为新一代工具迅速崛起，凭借更快的启动速度和更好的开发体验赢得了大量用户。那么，Webpack 和 Vite 到底有哪些核心区别？本文将深入剖析两者的不同，并通过代码示例帮助你做出选择。你更喜欢 Webpack 还是 Vite？开箱即用，适合 Vue/React 项目。，直接使用 ESM，启动速度极快。如果需要自定义配置，可编辑。后才能启动，耗时较长。

阅读 618

69赞

《Webpack》彻底入门Webpack（二）(1) 代码分割的目的为了减少加载代码大小和提取公共资源，减少加载次数做的优化；比如，多页面项目中，a页面和b页面都引入了jq，那么正常情况下，jq会被打包2次，这显然是不合理，jq只需要单独提取出来后打包一次就够了，没有必要混入在a，b中被打包两次；，关于这个功能，具体可以查看官网核心功能optimization介绍，或者核心功能optimization介绍；注意，版本差异：webpack3中使用：commonChunksPlugin，而在webpack4中使用。

阅读 980

29赞

风之少女梦

Webpack vs Vite：深度对比与实战示例，如何选择最佳构建工具？在现代前端开发中，构建工具至关重要，能直接影响开发效率和项目性能。Webpack 曾经是前端构建的事实标准，但随着前端生态的变化，Vite 作为新一代工具迅速崛起，凭借更快的启动速度和更好的开发体验赢得了大量用户。那么，Webpack 和 Vite 到底有哪些核心区别？本文将深入剖析两者的不同，并通过代码示例帮助你做出选择。你更喜欢 Webpack 还是 Vite？开箱即用，适合 Vue/React 项目。，直接使用 ESM，启动速度极快。如果需要自定义配置，可编辑。后才能启动，耗时较长。

阅读 780

75赞

真的很上进

Webpack--入门只看这一篇就够了(图文＋代码）代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。

阅读 2.3w

148赞

webpack搭建vue2项目完成后就可以开发vue2程序了。这只是最简单的一个示例其中还可以加入更多功能，使用官方的cli肯定更方便的。

阅读 2.7k

5赞

使用 Webpack 和 LocalStorage 实现静态资源的离线缓存使用 Webpack 和 LocalStorage 实现静态资源的离线缓存

阅读 6.3k

52赞

Webpack、Vite区别知多少？ Webpack、Vite区别知多少？我们常用的前端构建工具webpack、vite

阅读 9.1k

33赞

Attacking-Coder

前端面试宝典---webpack原理解析，并有简化版源码先看一下webpack打包后的bundle.js，前边的直接扫一眼就过，可以发现这个立即执行函数的形参就是一个，key为引入文件路径，value为该模块代码的函数。所以比较重要的就是通过webpack的配置文件中的entry的入口文件，递归去生成这个modules，并把代码中require变成__webpack_require__。

阅读 918

1赞

如何把一个非常古老的vue项目从webpack改到了vite 通过以上步骤，可以系统地将项目迁移到Vite。确保Node.js ≥14.18.0（Vite要求）创建新分支分阶段修改，遇到具体错误时可通过。直接引入JS入口（非Webpack的。检查第三方库是否依赖Node环境变量。验证SPA路由在静态服务器的表现。无需额外配置，Vite自动支持。验证路由、状态管理、异步加载。确保安装了正确的Vue插件（Vue 3项目：直接支持。检查资源加载路径是否正确。Vue 2项目：需安装。查看详细日志定位问题。

阅读 944

7赞

探索高效开发：koa-webpack 项目推荐探索高效开发：koa-webpack 项目推荐 koa-webpack Development and Hot Reload Middleware for Koa2 项目地址: https://gitcode.com/gh_mir...

阅读 1.0k

23赞

我有一只臭臭

Vue中webpack的使用 vue2项目使用webpack,介绍配置过程，以及中途遇到的问题。

阅读 1.1k

19赞

WebPack3项目升级webpack5的配置调试记录在GitHub上找了一个webgl实现地图引擎的开源项目，项目最后一次更新是2016年，当时的webpack是3的版本，原定思路是按照package.json文件进行环境配置，原以为把对应版本的包装好就行，事与愿违，捣鼓了一天，项目太久远了，node webpack sass-loader等等包即便是配好了，还要浏览器支持，最终还是选择webpack3升级webpack5。在webpack3环境搭建以及webpack升级的过程中，同样学到了很多东西，记录一下。

阅读 1.6k

15赞

Webpack基本用法学习总结 Webpack 是一个强大的静态资源打包工具，能够将多个文件打包成一个或多个输出文件，便于在浏览器中运行。其核心概念包括入口（entry）、输出（output）、加载器（loader）、插件（plugins）和模式（mode）。Webpack 本身只能处理 JavaScript 和 JSON 文件，其他资源如样式、图片等需要通过加载器处理。

阅读 839

29赞

自动扣webpack框架 | 某音 bd_ticket_guard_client_data 签名算法分析记录主要分析了某音中关键参数 bd_ticket_guard_client_data 的签名算法。文章首先通过解码 bd_ticket_guard_client_data 发现其核心为动态加密的 bd-ticket-guard-ree-public-key，随后通过逆向分析定位到生成该参数的函数，并推测其使用了RSA算法。作者进一步利用自动扣webpack代码框架，快速提取了相关代码，并成功生成了 bd_ticket 相关参数。

阅读 1.3k

35赞

webpack 学习 Webpack 是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。在 Web 开发中，它主要用于将各种资源（如 JavaScript、CSS、图片等）打包成浏览器可以直接运行的文件。webpack作用把静态模块内容，压缩、转译、打包等（前端工程化）

阅读 1.2k

8赞

2024年Web前端最全揭秘webpack插件工作流程和原理，web前端开发培训视频源码地址(948行)：https://github.com/webpack/webpack/blob/master/lib/Compiler.js。WebPack 编译流程图原图出自：https://blog.didiyun.com/index.php/2019/03/01/webpack///compilation对象创建完成。context: ‘/Users/frank/Desktop/fe/fe-blog/webpack-plugin’,//上下文，文件目录。解析生成AST静态语法树。

阅读 1.0k

21赞

每天吃饭的羊

Webpack 和 Vite 的区别综上所述，Webpack 和 Vite 各有优缺点，开发者可以根据项目的具体需求和规模来选择合适的构建工具。

阅读 889

15赞

Webpack与Vite构建工具对比分析类型：静态模块打包工具（Bundle-based）核心能力将JS/CSS/图片等资源视为模块通过Loader/Plugin处理复杂依赖支持代码分割、懒加载、Tree-shaking高度可配置化官方定位考量维度Webpack权重Vite权重开发体验★★★★★★★★构建速度★★☆★★★★★生态成熟度★★★★★★★★☆旧浏览器支持★★★★★★★☆配置灵活性★★★★★★★★☆。

阅读 1.1k

8赞

mocha-webpack 项目常见问题解决方案 mocha-webpack 项目常见问题解决方案 mocha-webpack mocha test runner with integrated webpack precompiler 项目地址: https://gitcode....

阅读 909

23赞

让应用更快更流畅：深入解析 Webpack PrefetchPlugin 的使用随着 Web 应用变得越来越复杂，提升用户体验和性能变得尤为重要。Webpack 作为当前最流行的模块打包工具之一，提供了众多优化加载速度的插件和技巧。其中，PrefetchPlugin 是一个非常有价值的工具，它通过在空闲时间预取未来可能需要的模块，从而显著提升应用的响应速度和用户体验。本文将详细介绍如何使用 Webpack 的 PrefetchPlugin 及其高级用法，帮助您打造更加流畅和高效的 Web 应用。在我们深入使用这个插件之前，先来搞清楚什么是“预取”（Prefetch）。

阅读 1.1k

27赞

作者推荐

一个专注写代码的程序媛: 本人是个小菜鸟，希望各位有空时可以回答一下我的问题，谢谢！

关注

森叶: 多年谷歌插件开发、Electron 客户端开发经历偏前端全栈开发工程师熟练使用PHP、Python、Javascript、Java 四种语言王森出品必属精品

关注

问白: 网易高级前端开发工程师

关注

Sam9029: 应无所往

关注

Z编程: 一个爱编程的男人

关注

混血哲谈: 无论身在何处，勿忘佛子本分

关注

Kinghiee: Front-end Developer

关注

duansamve: 我的Web前端(React、Vue)、NodeJS......开发笔记

关注

jydchudq: 写代码的修狗狗一只

关注

猛扇赵四那半好嘴: 程序媛一枚，热爱写 bug！

关注