教程

Webpack:现代化前端应用的基石

经过最近几年的爆炸式发展,前端已经绝不再是简简单单的页面开发了,从早期只是配合后端“切图”,到现在已经能够独立驱动整个业务,这背后就需要引入更多的思想、框架和工具。比如:

  • 现阶段的大型应用就要求前端必须要有独立的项目,独立的项目想要有足够的效率就必须进行工程化。
  • 具有复杂数据状态的应用开发过程就必须要有合适的框架,采用数据驱动开发的方式增强可维护性。
  • 复杂项目结构必须进行模块化管理,一来提高部分公共内容的可复用性,二来增强团队并行协作能力。
  • 重复规律性的工作必须采用自动化工具实现,一来提高效率,二来避免人为出错。

这里的大多数问题现如今都有很成熟的解法,那我今天要跟你分享的主题就是其中最具有代表性的 Webpack。因为想要在现代化前端开发工作中有足够的开发效率,你一定离不开 Webpack 相关技术栈,不管是对于项目代码的模块化,还是一些规律性的重复工作,甚至是整个前端项目的工程化,Webpack 都能够帮你轻松搞定。

提升前端生产力的利器

我个人觉得 Webpack 应该是现代化前端开发的基石,也是目前前端生产力的代名词

当然在日常工作中,确实有奉行“够用就行”工作态度的开发者,但我认为这是他们还没有意识到这些新技术新方案可能带来的成效。

最近正在招募一个前端研发团队,看了很多简历,也面试了很多前端开发者,发现基本上每一个人的简历上都洋洋洒洒写着 Vue.js、React 这样的主流框架,但是一旦问及使用这类框架进行开发时用到的一些基础设施,却开始支支吾吾,甚至直接表示:“我只要用官方 CLI 就好了啊”。

确实,这些框架的官方推出这种高度集成的 CLI 工具,目的就是降低开发者的使用成本,但是对于一个优秀的开发人员而言,只会使用这种“黑盒工具”是远远不够的,因为这种“黑盒工具”大多数采用的都是通用的配置,而优秀的开发人员应该学会“因地制宜”,根据实际情况更灵活地去使用每一个工具。

当然,仔细想想,这个问题也好理解,毕竟很多前端开发者都是在这些框架和工具的成熟期(2017 年以后)才进入的这个行业,所以对它们背后的事情自然是要陌生一些。而我有幸经历了整个前端工程化工具生态的发展过程,加上在这之前很长的开发经历,所以对这个过程中诞生的工具和思想自然会理解地更为深刻。

我深知这些内容对你日常开发工作中解决问题能力的影响,很多开发者在日常工作中遇到问题不能快速地定位和解决,就是因为缺乏对这种底层或者基础的足够了解。因此,很多时候我会把对 Webpack 这类工具的认知程度,当作辨别开发人员优秀与否的分水岭。

Webpack 与模块化开发

那说到 Webpack,就不得不提模块化开发,因为 Webpack 最早的出发点就是去实践前端方向的模块化开发。想要搞明白 Webpack,就先得搞明白它所要解决的问题,所以我这里先唠叨两句模块化的事情。

模块化,可以说是当下最重要的前端开发范式之一。随着前端应用的日益复杂化,我们的项目已经逐渐膨胀到了不得不花大量时间去管理的程度。而模块化就是一种最主流的项目组织方式,它通过把复杂的代码按照功能划分为不同的模块单独维护,从而提高开发效率、降低维护成本。

复杂代码的拆分

但是“模块化”,本身仅仅是一个思想或者说是一个理论,并不包含具体的实现。所以接下来,我们会一起学习如何使用 Webpack 在前端项目中实践模块化思想,以及目前行业中其他的一些优秀方案。

可能你会问:Webpack 不应该是一个构建工具么?怎么还扯上了这么多东西?这也是目前绝大多数前端开发者都会有的疑问。你如果会有这种疑问,一多半还是因为你还不够了解 Webpack,或者所了解的内容还停留在表象层面。毕竟,Webpack 太强大了,强大到很容易让你忽略了它的本质。

Webpack 本质上仍然还是一个模块化打包工具,它通过“万物皆模块”这种设计思想,巧妙地实现了整个前端项目的模块化。在 Webpack 的理念中,前端项目中的任何资源都可以作为一个模块,任何模块都可以经过 Loader 机制的处理,最终再被打包到一起。

Webpack 本身的架构中有两个很核心的特性,分别是 Loader 机制和插件机制。正是因为它的插件机制形成了非常繁荣的生态,所以造就了它现在“无所不能”的现状,所以让 Webpack 慢慢发展成了现在很多前端开发者眼中的构建系统。

我是如何设计这个系列的?

如果你现在每天都只是在使用 Vue CLI 或者 create-react-app 这样高度集成的 CLI,面对特殊资源加载、打包过程优化、资源代码分块、Tree-shaking 这样相对复杂的需求无从下手;又或是你初入前端行业,只有一些简单的前端开发经验,我都诚意推荐你跟着这个系列好好学习一下 Webpack 以及对前端模块的实践,这对你日后掌握 React 和 Vue.js 这类框架的高级用法非常有帮助。

这个系列文章整体基于 Webpack 最新的 v4.42.1 版本展开(尽管现在已经有新版本出现,但是这也不妨碍你理解我想要表达的内容),按照我一贯深入浅出、全面体系化的风格进行介绍,内容主要分为 4 个模块:

  • Webpack 背景介绍:包括模块化所解决的问题、模块化标准的演进过程、ES Modules 标准规范。希望你通过这个模块,能够了解 Webpack 这类工具解决的到底是什么问题。
  • Webpack 核心特性:包括基本特性、配置方式、工作模式、基本工作原理、Loader 机制、插件机制。希望你学习完这个模块,能够完全掌握 Webpack 的基本使用,理解 Webpack 打包过程和打包结果的工作原理,同时也能够自己开发 Webpack 的 Loader 和插件。
  • Webpack 高阶内容:包括 Source Map、模块热替换(HMR)机制、Proxy、Webpack Dev Server 等周边技能的使用,以及 Tree-shaking、sideEffects、Code Spliting 等高级特性的实践,再有就是常用优化插件、三种 hash 的最佳实践、打包速度优化,以更于你能更熟练地使用 Webpack 的高级特性,为开发效率添砖加瓦。
  • 其他同类优秀方案:Rollup、Parcel。希望通过这个模块的介绍,让你能够了解到一些 Webpack 同类的优秀方案,以及它们设计上的不同,这些都能够让你在工作中应对不同的项目、不同的需求时可以有更多的选择。

这个系列对你的知识储备要求不会太高,主要就是掌握 JavaScript 编程,了解一些 Node.js 基础,当然最好还能了解一些 Vue.js 之类主流框架的基本使用,这样可以帮助你更快速地定位我所描述的一些问题场景。

写作最后

最后,我还是想再次强调一个点:一个合格的前端开发者必须夯实基础,深入地理解所使用的技术,而不是浮于表面,保持“够用就行”的技术认知;在这之后,才是去丰富自己的技术栈。就好像我们经常说的,马步扎不稳,学会再多的招数也只是花拳绣腿。

相信经过这个系列文章的分享,你一定可以更深度、更全面地认识 Webpack,建立对 Webpack 整体的知识体系,掌握自定义和扩展 Webpack 的方法和技巧,更高效地使用 Webpack 解决实际项目开发中的需求和问题。

此外,我也希望我在文中所提出的一些问题和思考能够引起你的注意,因为设计的动机和思想才是学习每一个技术的关键所在:只掌握技术的使用,你的理解可能只能达到 6 ~ 7 成;只有真正搞明白新事物为什么这么设计,才能做到一通百通。这也正是近几年,技术圈很多人经常吐槽“学不动了”的根本原因。

正所谓“悟则通,通则达”,单纯地学习前人的做法而不去思考为什么,你就永远只能做最“累”的人。特别是在技术日新月异的时代,所有人都在持续学习,只有掌握核心精髓,更快更忧,你才能跑得最远。

好的学习,需要实践,也需要沟通和反馈,欢迎你在留言区给我分享你的学习感悟,以及成长过程中的经验与成就。