![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack
文章平均质量分 91
Webpack
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
[Vite 进阶] 配置环境变量(包含多工程、多环境配置)
同理运行yarn dev:wc2,将会打印出.env.wc2,.env.wc2.development,.env.wc2.production中的环境变量。同理新建env/.env.wc2,env/.env.wc2.development,env/.env.wc2.production三个文件,分别对应着项目2默认配置,项目2开发环境配置,项目2生产环境配置。它由base 配置项决定。优先级:.env.development || .env.production > .env.local > .env。转载 2024-05-31 09:19:41 · 191 阅读 · 0 评论 -
比 nvm 更好用的 node 版本管理工具
Volta是一种管理 JavaScript 命令行工具的便捷方式。volta的特点:速度无缝,每个项目的版本切换跨平台支持,包括 Windows 和所有 Unix shell支持多个包管理器稳定的工具安装-无需每次升级都重新安装!可扩展性挂钩用于特定于站点的定制。转载 2024-05-30 08:50:21 · 16 阅读 · 0 评论 -
深度剖析 Vite 配置文件
因为配置文件代码可能会有第三方库的依赖,所以当第三方库依赖的代码更改时,Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改,再重启 DevServer ,来保证当前生效的配置永远是最新的。不过,后面 Vite 还会处理一些边界情况,在用户配置不合理的时候,给用户对应的提示。其次,在加载配置文件的过程中,Vite 需要处理四种类型的配置文件,其中对于 ESM 和 CommonJS 两种格式的 TS 文件,分别采用了AOT和JIT两种编译技术实现了配置加载。转载 2024-05-29 09:08:11 · 27 阅读 · 0 评论 -
TS基础语法总结
1. extends(1)在 JS 中,担当类的继承重担(2)在 TS 类型中,当泛型约束(3)在 TS 类型中,条件判断的关键词2. in遍历,用于取联合类型的值,主要用于数组和对象的构造。不要用于 interface,否则会出错。} */3. keyof获取类、对象、接口的所有属性名组成的联合类型。} */4. infer泛型与条件与类型推断变量。表示在 extends 条件语句中以占位符出现的用来修饰数据类型的关键字,被修饰的数据类型等用到的时候才能被推断出来作用:获取参数,返回值,泛型 的类型。转载 2024-05-28 10:07:23 · 38 阅读 · 0 评论 -
webpack5(v5.59.1)打包流程详解及搭建项目
近期对自己负责的项目进行优化,但 webpack 这块一直有着茫然的不熟悉,本着对 webpack 打包配置及项目优化的进一步理解和学习,所以记录下自己学习的流程,加深印象,有深入的理解后再进行补充。另外,对不同版本的 webpack(比如 webpack4 和 webpack5),在一些配置的参考上会略有不同。此测试项目已上传至gitee:https://gitee.com/Faith-yin/demo_webpack,有错误及不准确之处,欢迎评论指正~转载 2024-05-28 09:53:24 · 91 阅读 · 0 评论 -
webpack5详细教程(5.68.0版本)
(2)配置:通过DefinePlugin实现新建 config/dev.env.js。原创 2024-05-27 08:56:06 · 1055 阅读 · 0 评论 -
深度剖析 Vite 配置文件
因为配置文件代码可能会有第三方库的依赖,所以当第三方库依赖的代码更改时,Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改,再重启 DevServer ,来保证当前生效的配置永远是最新的。因为配置文件代码可能会有第三方库的依赖,所以当第三方库依赖的代码更改时,Vite 可以通过 HMR 处理逻辑中记录的 configFileDependencies 检测到更改,再重启 DevServer ,来保证当前生效的配置永远是最新的。转载 2024-05-22 09:24:50 · 44 阅读 · 0 评论 -
前端开发技术栈(工具篇):2024深入了解快速开发工具vite的安装和使用(详细)
Vite是新一代前端开发与构建工具,能够显著提升前端开发体验。Vite意在提供开箱即用的配置,同时它的插件API和JavaScript API 带来了高度的可扩展性,并有完整的类型支持。由于其原生 ES模块导入方式,可以实现非常快的冷服务器启动。Vite 是 vue 的作者尤雨溪在开发vue3.0的时候开发的一个。转载 2024-05-10 08:42:42 · 978 阅读 · 0 评论 -
Webpack面试题一
Webpack和Gulp都是前端构建工具,但它们在设计理念和使用方式上有所不同。下面分别介绍一下Webpack和Gulp,并描述它们在项目中的典型使用场景。转载 2024-05-09 16:50:32 · 7 阅读 · 0 评论 -
Webpack面试题二
在Webpack中,提取公共模块是一种优化手段,可以避免在每个页面都重复加载相同的代码。和。entry定义了应用程序的入口文件,同时通过vendor定义了公共模块(例如,React 和 React DOM)。配置用于告诉Webpack在构建时如何拆分代码。表示将所有模块中的公共代码提取到一个单独的文件。配置用于将运行时代码提取到一个单独的文件中,以便在模块发生变化时不影响缓存。转载 2024-05-09 16:50:12 · 12 阅读 · 0 评论 -
Webpack之Tree Shaking
综上所述,Webpack 中 Tree Shaking 的实现分为如下步骤:在插件中根据模块的列表收集模块导出值,并记录到 ModuleGraph 体系的中在插件中收集模块的导出值的使用情况,并记录到集合中在方法中根据导出值的使用情况生成不同的导出语句使用 DCE 工具删除 Dead Code,实现完整的树摇效果。转载 2024-05-09 11:55:23 · 216 阅读 · 0 评论 -
Vite 打包 chunk 优化
同时,通过这次优化,也告诉我们在开发 JS 模块的时候要尽量避免模块副作用,将模块级别中的函数调用比如模块的初始化等,交给模块的使用方来做。这样的后果是 Vite 构建出来的文件数量更多,而 Webpack 构建出来的代码量更多(重复代码加上 Webpack 运行时的代码)。但是,用 Webpack(5.41.0)构建出来只有三个文件(index,a,b),其中 a 和 b 中都有 c 的代码。可以看到,a b c 的代码都合并到了一个 chunk 中,看来这个问题就这么简单的搞定了!但是可以当做纯函数。转载 2023-08-09 09:38:36 · 561 阅读 · 0 评论 -
Webpack优化——将你的构建效率提速翻倍
综上所述,其实本质上,我们对与webpack构建效率的优化措施也就两个大方向:缓存和多核。缓存是为了让二次构建时,不需要再去做重复的工作;而多核,更是充分利用了硬件本身的优势(我相信现如今大家的电脑肯定都是双核以上了吧,我自己这台公司发的低配 MAC 都有双核),让我们的复杂工作都能充分利用我们的 CPU。而将这两个方向化为实践的主角,也是我们前面介绍过的两大王牌,就是:cache-loader 和 happypack,所以你只要知道它并用好它,那你就能做到更好的构建优化实践。转载 2023-08-07 08:59:21 · 366 阅读 · 0 评论 -
Vite 4.4 正式版发布,全面拥抱 Lightning CSS
Lightning CSS 是一个用 Rust 编写的极快的 CSS 解析器、转换器和压缩器。通俗的讲,Lightning CSS就是Rust版本的PostCSS,然后 Lightning CSS内置了一些功能,比如 CSS压缩,语法降级,语法支持前缀,CSS模块化功能。并且,Lightning CSS可以与 Parcel 一起使用,也可以作为独立库或 CLI,或通过插件与任何其他工具一起使用。与其他的CSS方案相比,Lightning CSS具有明显的优势:图片。转载 2023-09-14 16:51:55 · 177 阅读 · 0 评论 -
Vite打包性能优化以及填坑
到了这一步,整个文件夹已经完全瘦身了。从一开始的30MB到现在的11.8MB了。我们在项目里面放置了许多json数据(因为业务原因不能上传到服务器),json数据已经占了差不多5、6mb的原因,所以是一个单纯的项目并没有这么大。image.png。转载 2023-07-31 15:29:49 · 392 阅读 · 0 评论 -
使用gulp实现前端自动化部署
在使用vue编译后需要上传到服务器,之前用的sftp客户端来上传,比较麻烦。现在使用gulp实现自动化部署。转载 2023-04-10 09:26:54 · 227 阅读 · 0 评论 -
webpack详解
webpack是现代前端开发中最火的模块打包工具,只需要通过简单的配置,便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置,便可以轻松实现对代码的构建呢?转载 2023-03-30 10:21:43 · 172 阅读 · 0 评论 -
由浅入深配置webpack4
webpack在前端化过程中十分重要,所以花了一段时间学习webpack,以及webpack4新特性,本文是按照从易到难的过程,梳理部分webpack概念,常见的loader,plugins,webpack4新特新,还有部分高级概念。webpack需要掌握的核心概念👇Entry:webpack开始构建的入口模块Output: 如何命名输出文件,以及输出目录,比如常见的dist目录。Loaders:作用在于解析文件,将无法处理的非js文件,处理成webpack能够处理的模块。Plugins。转载 2023-03-30 10:18:27 · 616 阅读 · 0 评论 -
Webpack——走向高阶前端的必经之路
在阅读本文之前,我就默认电脑前的你已经掌握了webpack的基本配置,能够独立搭建一款基于webpack的前端自动化构建体系,所以这篇文章不会教你如何配置或者使用webpack,自然具体概念我就不做介绍了,直面主题,开始讲解webpack原理。初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件接下来,我们将对具体流程逐一介绍。转载 2023-04-04 09:31:49 · 1326 阅读 · 0 评论 -
再来一打Webpack面试题
本文已收录在Github,欢迎Star。从头发的浓密程度和干练的走路姿势我察觉到,面前坐着的这位面试官也是一把好手。我像以往一样,准备花3分钟的时间进行自我介绍。在此期间,我的目光被16寸的MacBook Pro所吸引,这次的自我介绍我做足了准备,很有信心征服面试官。不出我所料,面试官被我引入了我擅长的领域。看来你对Webpack很熟悉,那我来考考你。转载 2023-03-30 10:21:11 · 108 阅读 · 0 评论 -
enhance-resolve中的数据流动和插件调度机制
通过一步一步的debug,会发现 enhance-resolve 这个库,把 tapable 给用的出神入化,核心的处理逻辑都在Resolver上,而则像是 流水线的 线长,借用Resolver的能力,去指定流水线的流程,分配流水线每个流程应该协作的工种。总的逻辑通下来,你会发现,所有的插件都是在对obj 对象做数据变更,每个插件都有自己的职责,互不干涉,互不影响,通过NextPlugin,这个外卖小哥插件,把 数据在各个 hook 流程之间进行流转,进而建立起一套高效的流水线系统,转载 2023-03-22 10:18:38 · 78 阅读 · 0 评论 -
【中级/高级前端】为什么我建议你一定要读一读 Tapable 源码
回应标题:为什么我建议你一定要读一读 Tapable 源码?所有人都知道Webpack很复杂,但 Webpack 的源码却很优雅,是一个典型的可插拔架构,不仅逻辑清晰,而且灵活好扩展。近几年出来的一些构建工具,大多也都参考了 Webpack 的这种架构方式。而实现这一切的核心就是借助了Tapable。关于Tapable的源码其实并没有多少代码量,学习它的原理首当其冲的一定是可以让你在日常开发中更得心应手,解决相关问题更加顺畅。其次,Tapable 的内部以特别巧妙的方式实现了发布订阅模式。转载 2023-03-09 10:54:09 · 135 阅读 · 0 评论 -
新时代的 SSR 框架破局者:qwik
我们可以看出来,qwik 的核心思路还是通过更加细粒的代码控制配合惰性加载事件处理程序以及事件委托来缩短首屏 TTI。文章中我们也讲到了 qwik 其实并不是因为使用了多么牛逼的算法导致它有多么快,而它的速度正是得益于它的设计思路,省略了传统 SSR 下首屏需要加载庞大的 JS 进行 hydration 的过程。当然,笔者对于 qwik 也仍是在学习阶段。后续会在公司里的更多项目尝试 qwik 之后也会和大家分享关于它的更多心得。转载 2023-03-07 10:21:24 · 161 阅读 · 0 评论 -
rollup - 构建原理及简易实现
对于应用适用于 webpack,对于类库更适用于 Rollup,react/vue/anngular 都在用Rollup作为打包工具以上代码实现过程可以帮你简单的实现一个 rollup 打包流程,但也仅仅是对 rollup 源码进行了抽象,方便大家理解 rollup 打包的原理,其中很多细节没有写出来,如果感兴趣的话,可以深入阅读一下源码。转载 2023-03-07 10:20:11 · 756 阅读 · 1 评论 -
构建webpack5知识体系【近万字总结】
在小型项目中,添加过多的优化配置,作用不大,反而会因为额外的 loader、plugin 增加构建时间;在加快构建时间方面,作用最大的是配置 cache,可大大加快二次构建速度。在减小打包体积方面,作用最大的是压缩代码、分离重复代码、Tree Shaking,可最大幅度减小打包体积。在加快加载速度方面,按需加载、浏览器缓存、CDN 效果都很显著。转载 2023-02-28 09:46:45 · 539 阅读 · 0 评论 -
如何创建 Babel 插件,超详细
Babel 是一个通用的多功能的 JavaScript 编译器。此外它还拥有众多模块可用于不同形式的静态分析。静态分析是在不需要执行代码的前提下对代码进行分析的处理过程 (执行代码的同时进行代码分析即是动态分析)。静态分析的目的是多种多样的, 它可用于语法检查,编译,代码高亮,代码转换,优化,压缩等等场景。你可以使用 Babel 创建多种类型的工具来帮助你更有效率并且写出更好的程序。在 Twitter 上关注,第一时间获取更新。转载 2023-02-28 09:48:57 · 139 阅读 · 0 评论 -
二十张图片彻底讲明白 Webpack 设计理念,以看懂为目的
本文是从零到亿系统性的建立前端构建知识体系✨中的第八篇。Webpack一直都是有些人的心魔,不清楚原理是什么,不知道怎么去配置,只会基本的 API 使用。它就像一个黑盒,让部分开发者对它望而生畏。而本节最大的作用,就是帮大家一点一点的消灭心魔。大家之所以认为Webpack复杂,很大程度上是因为它依附着一套庞大的生态系统。其实 Webpack 的核心流程远没有我们想象中那么复杂,甚至只需百来行代码就能完整复刻出来。因此在学习过程中,我们应注重学习它本身的设计思想,不管是它的Plugin 系统还是。转载 2023-03-10 10:05:55 · 119 阅读 · 0 评论 -
前端进阶高薪必看-Webpack篇
(更多知识请看官网。转载 2023-03-28 10:03:57 · 141 阅读 · 0 评论 -
你真的了解垃圾回收机制吗
我们知道垃圾回收机制是引擎来做的,JS引擎有很多种(各个浏览器都不同),其垃圾回收机制在一些细节及优化上略有不同,本文我们以一些通用的回收算法作为切入,再由 V8 引擎发展至今对该机制的优化为例(为什么以 V8 为例?因为它市场占有率大 😄 ),一步一步深入来助我们了解垃圾回收机制,因为只有真正了解垃圾回收机制,后面才能理解内存泄漏的问题以及手动预防和优化JavaScript 是门魅力无限的语言,关于它的 GC(垃圾回收)方面,你了解多少呢?转载 2023-03-28 10:04:45 · 139 阅读 · 0 评论 -
彻底弄懂Webpack中的Loader机制
面对这些框架所衍生出来的文件,现代的模块打包工具,例如Webpack本身只能处理js和JSON文件,其他类型文件它是不能够处理的。需要借助Loader来处理这些类型的文件,并将它们转换为有效的模块。因此要学好 Webpack,我们就需要掌握其核心——Loader 机制。Loader 的本质是什么?在 Webpack 中如何使用自定义 Loader?有几种方式?Loader 的类型有哪几种?它们的运行顺序是怎么样的?如何控制它们的运行顺序?什么是?什么是?它们的运行机制有什么不同?转载 2023-03-17 09:35:44 · 630 阅读 · 0 评论 -
来聊聊 9 种 React Hook详解
精通 React Hook ,看这一篇足矣了。文章会为你讲述 React 9种 Hook 的日常用法以及进阶操作,从浅入深彻底掌握 React Hook!转载 2023-03-06 10:09:41 · 967 阅读 · 0 评论 -
如何编排你的异步任务并发数量,在Webpack5中我找到了答案
Webpack Version 5 中对于任务调度实现了一套基于 AsyncQueue 的逻辑来管理各个任务之间的执行顺序。深入研究了下,发现 Webpack 源代码中涉及到任务调度相关内容都会基于 AsyncQueue 来初始化队列,从而实现异步队列调用。所谓 AsyncQueue 本质上就是 Webpack 开发任务自己实现的一款任务调度器,如果你有兴趣深入了解 Webpack ,那么理解 AsyncQueue 是你不可或缺的准备。转载 2023-03-09 10:52:46 · 214 阅读 · 0 评论 -
带你畅游在 Webpack 插件开发者的世界
/...},复制代码所谓 externals 即是说「从输出的 bundle 中排除依赖」。比如使用上方的配置 Webpack 在进行模块编译时如果发现依赖模块 jqery 时,此时并不会将 jquery 打包进入模块依赖中,而是当作外部模块依赖使用全局对象上的 jQuery 赋值给 jquery 模块。关于 externals 更加详尽的配置你可以看这里。也许首次接触 externals 的朋友仍然还不是很明白,让我们来举个例子说明一下吧,复制代码。转载 2023-03-15 10:48:56 · 170 阅读 · 0 评论 -
Webapck5核心打包原理全流程解析
这篇文章相对有一定的知识门槛并且代码部分居多,敬佩每一位可以读到结尾的同学。文章中对于实现一个简易版的Webpack在这里就要和大家告一段落了,这其实只是一个最基础版本的webpack工作流。但是正是通过这样一个小🌰可以带我们真正入门webpack的核心工作流,希望这篇文章对于大家理解webpack时可以起到更好的辅助作用。其实在理解清楚基础的工作流之后,针对于loader和plugin开发都是信手拈来的部分,文章中对于这两部分内容的开发介绍比较肤浅,后续我会分别更新有关loader和plugin。转载 2023-03-17 09:33:57 · 137 阅读 · 0 评论 -
90 行代码的webpack,你确定不学吗?
本文从webpack的设计理念和最终实现出发,梳理了其作为一个打包工具的核心能力,并使用一个简易版本实现帮助更直观的理解其本质。总的来说,webpack作为打包工具无非是从应用入口出发,递归的找到所有依赖模块,并将他们解析输出成一个具备类 CommonJS 模块化规范的模块加载能力的 JavaScript 文件。因其优秀的设计,在实际生产环节中,webapck还能扩展出诸多强大的功能。然而其本质仍是模块打包器。不论是什么样的新特性或新能力,只要我们把握住打包工具的核心思想,任何问题终将迎刃而解。转载 2023-03-09 10:45:31 · 61 阅读 · 0 评论 -
从 0 到 1 解读 rollup Plugin
恭喜你,把 rollup 那么几种钩子函数都熬着看过来了,并且又梳理了一遍 rollup.rollup() 打包流程。总结几点输出,康康我们学到了什么: rollup 的插件本质是一个处理函数,返回一个对象。返回的对象包含一些属性(如 name),和不同阶段的钩子函数(构建 build 和输出 output 阶段),以实现插件内部的功能;关于返回的对象,在插件返回对象中的钩子函数中,大多数的钩子函数定义了 插件的调用时机和调用方式,只有 runHook(Sync)钩子真正执行了插件;转载 2023-03-14 10:07:27 · 528 阅读 · 0 评论 -
快速实现一个简易版 vite
利用 esbuild 进行预构建工作,其目的是能将我们依赖的浏览器不支持运行的 CJS 和 AMD 模块的代码打包转换为浏览器支持的 ES 模块代码,同时避免了过多的网络请求次数。模拟源码实现一个 transformMiddleware,其目的是能将源代码进行转换浏览器能支持运行的代码,如:分析源代码的 import 语句并其替换为浏览器可执行的 import 语句以及将 vue 文件转换为可执行的 js 代码。转载 2023-03-07 10:19:54 · 351 阅读 · 0 评论 -
10 分钟搞懂 Vite devServer,速来围观
这就有了 cli 里的创建 server方法啦~ 总结一下:本文从初始第一步的 cli 命令开始来引入,vite 命令做了什么,然后引导大家找到 createServer 的入口。其次,我们深入探究 createServer 需要的"五脏十五腑",有 websocketServer,fsWatcher,moduleGraph 等 5 个模块来支撑需要的零件,根据 15 个中间件的分工来串联整个加工流程,最终打磨出我们的 devServer。转载 2023-03-07 10:06:16 · 3641 阅读 · 0 评论 -
无用代码去哪了?项目减重之 rollup 的 Tree-shaking
tree-shaking 这个概念早就有,但却是在 rollup 中实现后才开始被重视,本着寻根究源好奇的心理,我们就先从 rollup 入手 tree-shaking 一探究竟吧~~那么,先让我们来康康 tree-shaking 是干啥的?打包工具中的 tree-shaking, 较早时候由 Rich_Harris 的 rollup 实现,官方标准说法: 本质上消除无用的 JS 代码。就是说,当引入一个模块时,并不引入整个模块的所有代码,而是只引入我需要的代码,那些我不需要的无用代码就会被”摇“掉。转载 2023-03-07 10:07:26 · 647 阅读 · 0 评论 -
Webpack-dev-server的proxy用法
如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~)转载 2023-03-24 09:51:05 · 787 阅读 · 0 评论