随着 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:模块的id
dependencies:模块依赖
factory:模块的工厂函数,就是模块的初始化操作函数
require:引入模块

  • ES6 Module:ES6推出的一套模块化规范

import:引入模块依赖
export:模块导出

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

除了JavaScript的模块化,在CSS样式中也可以采用@import的方法来引入需要的CSS

@import 'index.css'

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

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

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

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

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

三、什么是webpack
本质上webpack是一个现代的js应用程序的静态打包器。在webpack处理应用程序时,它会在内部常见一个依赖图,用于映射到项目需要的每个模块,然后将这些依赖生成一个或多个bundle。

四、webpack可以解决的问题
webpack可以按需加载。
像Grunt、Gulp这类构建工具,打包的思路是遍历源文件匹配规则打包这个过程中做不到按需加载,对打包起来的资源,到底用不用打包过程并不关心。

Webpack可以解决传统构建工具的问题

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

前往低代码交流专区

更多推荐