Webpack
文章平均质量分 96
我乐了.
这个作者很懒,什么都没留下…
展开
-
如何选择打包工具:Webpack和Parcel ,零配置完成打包任务?
Parcel 是 2017 年发布的,出现的原因是因为当时的 Webpack 使用过于烦琐,文档也不是很清晰明了,所以 Parcel 一经推出就迅速被推上风口浪尖。真正做到了完全零配置,对项目没有任何的侵入;自动安装依赖,开发过程更专注;构建速度更快,因为内部使用了多进程同时工作,能够充分发挥多核 CPU 的效率。但是目前看来,如果你去观察开发者的实际使用情况,绝大多数项目的打包还是会选择 Webpack。Webpack 生态更好,扩展更丰富,出现问题容易解决;原创 2024-02-13 14:33:17 · 1295 阅读 · 0 评论 -
如何选择打包工具:Rollup 和 Webpack ?
输出结果更加扁平,执行效率更高;自动移除未引用代码;打包结果依然完全可读。加载非 ESM 的第三方模块比较复杂;因为模块最终都被打包到全局中,所以无法实现 HMR;浏览器环境中,代码拆分功能必须使用 Require.js 这样的 AMD 库。综合以上特点,我们发现如果我们开发的是一个应用程序,需要大量引用第三方模块,同时还需要 HMR 提升开发体验,而且应用过大就必须要分包。那这些需求 Rollup 都无法满足。原创 2024-02-13 14:31:43 · 738 阅读 · 0 评论 -
如何优化 Webpack 的构建速度和打包结果?
不过这里需要注意的是,如果你的 CSS 体积不是很大的话,提取到单个文件中,效果可能适得其反,因为单独的文件就需要单独请求一次。不过这里还有个额外的小点,可能你会在这个插件的官方文档中发现,文档中的这个插件并不是配置在 plugins 数组中的,而是添加到了 optimization 对象中的 minimizer 属性中。在不同环境的具体配置中我们先导入公共配置对象,然后这里可以使用 Object.assign 方法把公共配置对象复制到具体环境的配置对象中,并且同时去覆盖其中的一些配置。原创 2024-02-13 14:26:26 · 715 阅读 · 0 评论 -
玩转 Webpack 高级特性应对项目优化需求(下)
所以这里还需要修改配置文件,我们回到配置文件中,找到输出 HTML 的插件,默认这个插件会自动注入所有的打包结果,如果需要指定所使用的 bundle,我们可以通过 HtmlWebpackPlugin 的 chunks 属性来设置。多入口打包本身非常容易理解和使用,但是它也存在一个小问题,就是不同的入口中一定会存在一些公共使用的模块,如果按照目前这种多入口打包的方式,就会出现多个打包结果中有相同的模块的情况。在这个对象中一个属性就是一个入口,属性名称就是这个入口的名称,值就是这个入口对应的文件路径。原创 2024-02-13 14:25:06 · 973 阅读 · 0 评论 -
玩转 Webpack 高级特性应对项目优化需求(上)
最后我们来总结一下,今天介绍到了两个 Webpack 中的高级特性,分别是 Tree-shaking 和 sideEffects。Tree-shaking 的本身没有太多需要你理解和思考的地方,你只需要了解它的效果,以及相关的配置即可。而 sideEffects 可能需要你花点时间去理解一下,重点就是想明白哪些副作用代码是可以随着模块的移除而移除,哪些又是不可以移除的。总结下来其实也很简单:对全局有影响的副作用代码不能移除,而只是对模块有影响的副作用代码就可以移除。原创 2024-02-13 14:24:10 · 751 阅读 · 0 评论 -
如何让你的模块支持热替换(HMR)机制?
以上就是我们对 Webpack 模块热替换特性做的一些探索,整体下来可能你会觉得 HMR 比较麻烦,需要写一些额外的代码,甚至觉得不如不用。我个人的看法是利大于弊,这个道理就像是为什么现在的开发者都愿意写单元测试一样,对于长期开发的项目而言,这点额外的工作不算什么,而且如果你能为自己的代码设计出一些规律,那你也可以实现一个通用替换方案。那当然,如果你是使用 React 或者 Vue.js 这类的框架开发,那么使用 HMR 功能会更加简单,因为大部分框架都有成熟的 HMR 方案,你只需要使用就可以了。原创 2024-02-13 14:21:56 · 591 阅读 · 0 评论 -
如何配置 Webpack SourceMap 的最佳实践?
Source Map(源代码地图)就是解决此类问题最好的办法,从它的名字就能够看出它的作用:映射转换后的代码与源代码之间的关系。一段转换后的代码,通过转换过程中生成的 Source Map 文件就可以逆向解析得到对应的源代码。目前很多第三方库在发布的文件中都会同时提供一个 .map 后缀的 Source Map 文件。例如 jQuery。我们可以打开它的 Source Map 文件看一下,如下图所示:这是一个 JSON 格式的文件,为了更容易阅读,我提前对该文件进行了格式化。原创 2024-02-13 14:19:18 · 1864 阅读 · 0 评论 -
探索 Webpack 运行机制与核心工作原理
其实 Webpack 官网首屏的英雄区就已经很清楚地描述了它的工作原理,如下图所示:那这里我们先来快速理解一下 Webpack 打包的核心工作过程。我们以一个普通的前端项目为例,项目中一般都会散落着各种各样的代码及资源文件,如下图所示:比如 JS、CSS、图片、字体等,这些文件在 Webpack 的思想中都属于当前项目中的一个模块。Webpack 可以通过打包,将它们最终聚集到一起。通过 Loader 处理特殊类型资源的加载,例如加载样式、图片;原创 2024-02-13 14:14:25 · 851 阅读 · 0 评论 -
如何利用插件机制横向扩展 Webpack 的构建能力?
那如果是 JS 文件,我们将文件内容得到,再通过正则替换的方式移除掉代码中的注释,最后覆盖掉 compilation.assets 中对应的对象,在覆盖的对象中,我们同样暴露一个 source 方法用来返回新的内容。一般来说,当我们有了某个自动化的需求过后,可以先去找到一个合适的插件,然后安装这个插件,最后将它配置到 Webpack 配置对象的 plugins 数组中,这个过程唯一有可能不一样的地方就是,有的插件可能需要有一些配置参数。它可以是一个通配符,也可以是一个目录或者文件的相对路径。原创 2024-02-13 14:13:24 · 611 阅读 · 0 评论 -
深入理解 Webpack Loader 机制的原理
总体来说,Loader 机制是 Webpack 最核心的机制,因为正是有了 Loader 机制,Webpack 才能足以支撑整个前端项目模块化的大梁,实现通过 Webpack 去加载任何你想要加载的资源。原创 2024-02-13 14:10:28 · 925 阅读 · 0 评论 -
如何使用 Webpack 实现模块化打包?
整体上对于 Webpack 的基本使用其实并不复杂,特别是在 Webpack 4 以后,很多配置都已经被简化了,在这种配置并不复杂的前提下,开发人员对它的掌握程度主要就体现在了是否能够理解它的工作机制和原理上了。就拿 Webpack 打包过后的结果来说,大多数的开发者其实根本不会关心它内部的结构是怎样的,又是如何运行起来的,总觉得不需要关心,但是当这种“不用关心”的事情越积越多,整个开发过程不可控的点也会随之增多,当出现问题时,也就很难定位问题的根源了。原创 2024-02-13 14:07:15 · 789 阅读 · 0 评论 -
Webpack 究竟解决了什么问题?
最早我们会基于文件划分的方式实现模块化,也就是 Web 最原始的模块系统。对于开发过程而言,模块化肯定是必要的,所以我们需要在前面所说的模块化实现的基础之上引入更好的方案或者工具,去解决上面提出的 3 个问题,让我们的应用在开发阶段继续享受模块化带来的优势,又不必担心模块化对生产环境所产生的影响。除了模块加载的问题以外,目前这几种通过约定实现模块化的方式,不同的开发者在实施的过程中会出现一些细微的差别,因此,为了统一不同开发者、不同项目之间的差异,我们就需要制定一个行业标准去规范模块化的实现方式。原创 2024-02-13 14:03:39 · 577 阅读 · 0 评论