Skip to main content

moregeek program

什么是 webpack?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 三水清

随着 Web 前端的不断发展,传统网页开发正在逐渐往 Web 应用(Web Application,简称 WebAPP)的开发方式转变,页面开始变得越来越复杂,复杂的应用场景必然引起技术的进步,还会出现新的技术手段来解决现有问题。前端模块化和工程化的呼声越来越高,随着前些年大行其道的 Grunt、Gulp、FIS 等构建工具的发展,带动了一波前端工程化热潮。近几年,经过 React、Vue 库这些年的扩张,大型 Webapp 不再局限于手写 jQuery 操作 DOM,让大型 Webapp 有了全新的开发体验。

在这个过程中,前端逐渐发展成了模块化和单页应用(single-page application,简称 SPA)为主的形式,在这种形态和 React、Vue 这些库的普及下,Webpack 越来越被大家当成了主流构建工具。

模块化

说起 Webpack,大家都知道这是一个模块化构建工具,那么究竟什么是模块化呢?

模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程,有多种属性,分别反映其内部特性。(百度百科)

模块化被越来越多的应用到我们的日常生活中,在我的印象中,小时候家电(比如收音机、电视)坏了都是拿到店里去找老师傅维修,现在家电都是模块化的,检测下哪里坏了直接换个新模块就可以了,由此可见,模块化不仅仅是个前端概念,在我们生活场景中也大量的充斥着模块化,模块化让我们的生活效率更高。

前端模块化一般指的是 JavaScript 的模块,最常见的是 Nodejs 的 NPM 包,每个模块,可能是最小甚至是最优的代码组合,也可能是为了解决某些问题,包括很多特定模块组成的大模块。如果没有模块化,可能大家编写代码时遇见最多的就是复制(copy)。

当我们需要某个功能的代码时,可以查看一下,自己在哪个以前的项目写过,有写过,我们就会 copy 过来,copy 多了,自然代码的可维护性就会下降。

模块化之后的代码,我们考虑更多的是:代码使用和维护成本的问题。所以有了很多模块化的规范:CommonJSAMDES6 Module规范(另外还有CMDUMD等),下面我们来简单看一下:

  • CommonJS:是 Nodejs 广泛使用的一套模块化规范,是一种同步加载模块依赖的方式;require:引入一个模块exports:导出模块内容module:模块本身
  • AMD:是 JS 模块加载库RequireJS提出并且完善的一套模块化规范,AMD 是一种异步加载模块依赖的方式;id:模块的 iddependencies:模块依赖factory:模块的工厂函数,即模块的初始化操作函数require:引入模块
  • ES6 Module:ES6 推出的一套模块化规范。import:引入模块依赖export:模块导出

Tips:除了上面三大主流规范,还有 CMD(国产库 SeaJS 提出来的一套模块规范)和 UMD(兼容 CommonJS 和 AMD 一套规范)。目前多数模块的封装,既可以在 Node.js 环境又可以在 Web 环境运行,所以一般会采用 UMD 的规范,后面 Webpack 针对 lib 库的封装会有进一步介绍。

除了 JavaScript 的模块化,在 CSS 样式中也可以采用@import的方式来引入自己依赖的模块:

@import 'reset.css';

在一些 Less 或者 Sass 这些 CSS 预处理语言中@import还可以用来导入一些变量、函数和mixin的定义。

Tips:大家可能也经常听到组件化这个名词,模块化一般指的是,可以被抽象封装的最小/最优代码集合,模块化解决的是功能耦合问题;组件化则更像是模块化进一步封装,根据业务特点或者不同的场景封装出具有一定功能特性的独立整体;另外,前端提到组件化更多的是具有模板、样式和 JS 交互的 UI 组件。

关于模块化开发相关的内容,在「Webpack 模块化开发」部分会继续详细介绍。

工程化

当我们开发的 Web 应用越来越复杂的时候,会发现我们面临的问题会逐渐增多:

  1. 模块多了,依赖管理怎么做?
  2. 页面复杂度提升之后,多页面、多系统、多状态怎么办?
  3. 团队扩大之后,团队合作怎么做?
  4. 怎么解决多人研发中的性能、代码风格等问题?
  5. 如何权衡研发效率和产品迭代的问题?

这些问题就是软件工程需要解决的问题。工程化的问题需要运用工程化工具来解决,得益于 Nodejs 的发展,前端这些年在工程化上,取得了不俗的成绩。

前端工程化早期,是以 Grunt、Gulp 等构建工具为主的阶段,这个阶段解决的是重复任务的问题,它们将某些功能拆解成固定步骤的任务,然后编写工具来解决,比如:图片压缩、地址添加 hash、替换等,都是固定套路的重复工作。

而现阶段的 Webpack 则更像是从一套解决 JavaScript 模块化依赖打包开始,利用强大的插件机制,逐渐解决前端资源依赖管理问题,依附社区力量逐渐进化成一套前端工程化解决方案。

什么是 Webpack?_构建工具

什么是 webpack?

什么是 Webpack?_构建工具_02

本质上,Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 Webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个 bundle。

webpack 解决什么问题?

Webpack 可以做到按需加载。像 Grunt、Gulp 这类构建工具,打包的思路是:遍历源文件匹配规则打包,这个过程中做不到按需加载,即对于打包起来的资源,到底页面用不用,打包过程中是不关心的。

Webpack 跟其他构建工具本质上不同之处在于:Webpack 是从入口文件开始,经过模块依赖加载、分析和打包三个流程完成项目的构建。在加载、分析和打包的三个过程中,可以针对性的做一些解决方案,达到按需加载的目的,比如code split(拆分公共代码等)。

当然,Webpack 还可以轻松的解决传统构建工具解决的问题:

  • 模块化打包,一切皆模块,JS 是模块,CSS 等也是模块;
  • 语法糖转换:比如 ES6 转 ES5、TypeScript;
  • 预处理器编译:比如 Less、Sass 等;
  • 项目优化:比如压缩、CDN;
  • 解决方案封装:通过强大的 Loader 和插件机制,可以完成解决方案的封装,比如 PWA;
  • 流程对接:比如测试流程、语法检测等。

小结

本文从 Web 前端发展开始,介绍了模块化、工程化相关的概念和发展现状,最后介绍了 Webpack 的应用场景,以及为什么有了 Grunt、Gulp 这类传统构建工具,社区有产生 Webpack 这种构建工具。

©著作权归作者所有:来自51CTO博客作者imooc慕课君的原创作品,请联系作者获取转载授权,否则将追究法律责任

#yyds干货盘点#今天讲讲时间管理_文本、的博客-多极客编程

有朋友说工作一天基本上没有时间和精力去阅读了,这里讲讲我的时间管理。​我并不是读书狂,忙里偷闲看的这些书并不算多,其中技术类的书需要精神高度集中,读完一章赶紧做些练习巩固。非技术书主要是上下班的路上、饭后休息和晚上睡觉前读完的。很多畅销书,比如《番茄工作法》、《小强升职记》、《高效能人士的七个习惯》等等,但是发现这些书虽然理论性强,但在自己身上的实践却差强人意,在自身综合素质并不很高的情况下采用这

【转行测试开发-redis】(五)---使用redis的数据类型列表list_小小迷糊的博客-多极客编程

昨天讲了使用java里maven配置redis来连接redis数据库,操作并获取数据库中的值.今天我们来说下另一个常用的数据类型---列表list   Redis列表是简单的字符串列表,按照插入顺序排序。可以添加一个元素到列表的头部(左边)或者尾部(右边). 下面我们说下redis列表的命令:   1 BLPOP key1 [key2 ] timeout移出并获取列表的第一个元素, 如果列表没有元

「测试开发全栈-html」(20)css的引入方式-外部样式表和总结_小小迷糊的博客-多极客编程

上午学习了HTML语言CSS样式的内部样式表,现在我们来学习下外部样式表。这是CSS样式表的一个重点。   实际开发都是外部样式表,适合于样式比较多的情况,核心是: 样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用。   引入外部样式表,分为两步:   1.新建一个后缀名为.css的样式文件,把所有CSS代码都放到这个样式文件中。   2.在HTML页面中,使用<link&

学会二阶思维,你就能像巴菲特一样思考了_华为云开发者社区的博客-多极客编程

摘要:养成二阶思维的习惯是一个漫长、痛苦的过程,但坚持下来,总会收获很大。本文分享自华为云社区《​​二阶思维​​》,作者:元闰子。事情往往不是你想象的那样,有时候,看似解决了问题,却在不经意间,引发了更严重的后果。帮助我们思考、决策、解决问题的最有效方法是,运用二阶思维。什么是二阶思维?一阶思维是单纯而肤浅的,几乎人人都能做到;二阶思维则是深邃、复杂而迂回的,能做到的人少之又少。—— 霍华德·马克

typescript应该怎么学?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 Lison如果自学TypeScript,到底要如何学呢?1.2.1 学会看文档英文官方文档始终是及时更新的。但即便是官方的文档,有一些更新在更新日志里写了,而新手指南里却没有及时同步更新,所以有时看指南也会遇到困惑,就是文档里写的和你实际验证的效果不一样。遇到这种问题,首先确定你使用的TypeScript版本,然后去更新日志里根据不同版本找对这部分知识的更新记录。如果找到了

javascript中常用数据类型,你知道几个?_imooc慕课君的博客-多极客编程

作者| 慕课网精英讲师 Lison这篇文章我们了解一下 JavaScript 中现有的八个数据类型,当然这并不是 JavaScript 中的所有数据类型,而是现在版本的 TypeScript 支持的基本类型,在学习基础类型之前,我们先来看下如何为一个变量指定类型:为一个变量指定类型的语法是使用"变量: 类型"的形式,如下:let num: number = 123如果你没有为这个变量指定类型,编译

freertos的软件定时器介绍和使用_嵌入式开发的博客-多极客编程

freeRTOS中加入了软件定时器这个功能组件,是一个可选的、不属于freeRTOS内核的功能,由定时器服务(其实就是一个定时器任务)来提供。软件定时器是当设定一个定时时间,当达到设定的时间之后就会执行指定的功能函数,而这个功能函数就叫做回调函数。也就是说回调函数的两次执行间隔叫做定时器的定时周期。 回调函数:回调函数就是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个

精华推荐 | 【深入浅出rocketmq原理及实战】「底层原理挖掘系列」透彻剖析贯穿rocketmq的存储系统的实现原理和持久化机制_李博alex的博客-多极客编程

RocketMQ的发展历史RocketMQ是一个统一消息引擎、轻量级数据处理平台。RocketMQ是一款阿里巴巴开源的消息中间件。 2016 年 11 月 28 日,阿里巴巴向 广西党性培训 Apache 软件基金会捐赠RocketMQ,成为 Apache 孵化项目。 2017 年 9 月 25 日,Apache 宣布 RocketMQ孵化成为 Apache 顶级项目(TLP ),成为国内首个互联

tidb笔记_histry的博客-多极客编程

TiDB笔记 1.功能介绍 TiDB Server集群(无状态,不存储数据) 处理客户端发送的sql语句,进行解析编译优化,生成执行计划 如果是insert要将表的数据转换为key和value的形式,向TiKV存储 执行online DDL 每隔十分钟左右进行垃圾回收(GC)将历史版本数据删除 可水平扩展,增强并发处理能力 TiKV 存储数据(数据持久化),存储引擎集群,默认创建三

karmada跨集群优雅故障迁移特性解析_华为云开发者社区的博客-多极客编程

摘要:在 Karmada 最新版本 v1.3中,跨集群故障迁移特性支持优雅故障迁移,确保迁移过程足够平滑。本文分享自华为云社区《​​Karmada跨集群优雅故障迁移特性解析​​》,作者:Karmada社区。在多云多集群应用场景中,为了提高业务的高可用性,用户的工作负载可能会被部署在多个集群中。然而当某个集群发生故障时,为保证业务的可用性与连续性,用户希望故障集群上的工作负载被自动的迁移到其他条件适

浅谈电力监控在供配电管理中的应用分析_wx636d99e14640b的博客-多极客编程

罗轩志安科瑞电气股份有限公司 上海嘉定 201801摘要:为了进一步提升供配电设计的质量水平,要整合系统应用要点,充分发挥电力监控系统的应用价值,提升资源利用率,减少运行中的经济损失和运营成本。分析供配电设计应用电力监控系统的具体作用,从组态软件功能设计、网络方案设计、现场智能监控设计 3 个方面对具体设计内容展开讨论,最后结合案例分析应用方案。  关键词:电力监控系统;供配电设计;Power L

一步一步写算法(之快速排序)-多极客编程_一步算法和两步算法

    快速排序是编程中经常使用到的一种排序方法。可是很多朋友对快速排序有畏难情绪,认为快速排序使用到了递归,是一种非常复杂的程序,其实未必如此。只要我们使用好了方法,就可以自己实现快速排序。    首先,我们复习一下,快速排序的基本步骤是什么:    1、 判断输入参数的合法性    2、把数组的第一个数据作为比较的原点,比该数据小的数据排列在左边,比该数据大的数据排列在右边    3、按照(2