作者 | 慕课网精英讲师 三水清
随着 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 多了，天然代码的可维护性就会降落。模块化之后的代码，咱们思考更多的是：代码应用和保护老本的问题。所以有了很多模块化的标准：CommonJS、AMD 和 ES6 Module 标准（另外还有 CMD、UMD 等），上面咱们来简略看一下：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 利用越来越简单的时候，会发现咱们面临的问题会逐步增多：模块多了，依赖治理怎么做？页面复杂度晋升之后，多页面、多零碎、多状态怎么办？团队扩充之后，团队单干怎么做？怎么解决多人研发中的性能、代码格调等问题？如何衡量研发效率和产品迭代的问题？这些问题就是软件工程须要解决的问题。工程化的问题须要使用工程化工具来解决，得益于 Nodejs 的倒退，前端这些年在工程化上，获得了不俗的问题。前端工程化晚期，是以 Grunt、Gulp 等构建工具为主的阶段，这个阶段解决的是反复工作的问题，它们将某些性能拆解成固定步骤的工作，而后编写工具来解决，比方：图片压缩、地址增加 hash、替换等，都是固定套路的反复工作。而现阶段的 Webpack 则更像是从一套解决 JavaScript 模块化依赖打包开始，利用弱小的插件机制，逐步解决前端资源依赖治理问题，附丽社区力量逐步进化成一套前端工程化解决方案。
什么是 webpack？
实质上，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 这种构建工具。