撩课-Web架构师养成系列-构建工具

前言

Web架构师养成系列共15篇，每周更新一篇，主要分享、探讨目前大前端领域（前端、后端、移动端）企业中正在用的各种成熟的、新的技术。部分文章也会分析一些框架的底层实现，让我们做到知其然知其所以然。

---本篇文章阅读需要时长：约15分钟---

在学习常用的构建工具前，我们得先明白为什么在前端开发中需要使用各种构建工具？

一、为什么要使用构建工具？

在前端项目中使用构建工具，主要是基于以下几个原因:

(1) JavaScript和CSS的依赖问题

在开发中，经常出现的另一个问题，就是JavaScript和CSS的依赖问题；简单的说就是JavaScript和CSS的在页面中的顺序问题。

经常会造成CSS没起作用，JavaScript的某个变量和方法找不到。

有很多情况都是因为引入JavaScript或者CSS的顺序不对，虽然我们可以使用一些RequireJS之类的模块管理，但是依然在很多情况下需要引入不同的文件，尤其是CSS没有一个好的模块化管理的组件。

那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题，而构建工具可以大大减少此类问题。

(2)性能优化

一般浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是为了前端项目的代码更清晰，结构更合理，我们采用了MVC，MVVM等很多架构分解出了很多JS文件，无疑又拖慢了网页的速度。

为了解决这个问题，一般会采用以下两个方案：

文件合并

浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件，假如浏览器并发数是5，你有30个JS文件，而每5个需要2S, 那么你光下载JS文件都需要12S。

那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。

文件压缩

我们知道文件越大，下载越慢，而针对JavaScript和CSS，里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响。

所以为了减少文件大小，一般的情况我们都会用工具去掉空格和换行，有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做，而源代码一定要保证命名可读性) 来减少文件大小。

而所有的前端构建工具都具有文件合并和压缩的功能。

(3) 提高开发效率

Vendor前缀

在CSS3使用越来越多的时候，我们都知道一些CSS3的新特性，在不同的浏览器中，CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀。

单元测试

JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段。

所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常有必要的，能进一步检测你的项目的健壮性和容错能力。

代码分析

我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。

版本升级

比如第一版本使用npm之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话。

一来耗时二来容易出错，尤其是开发版本和生产版本之间切换会有很多问题，那么使用前端构建工具可以很好的解决这些问题。

常见的前端构建工具有Gulp、Grunt、Webpack等，我们接下来一一学习和了解他们。

二、什么是webpack？

webpack是一个模块打包器（bundler）。

在webpack的概念中，前端的所有资源文件（js/css/json/img/sass/less/...）都会作为模块来被处理，webpack会根据模块的依赖关系进行静态分析，生成对应的静态资源，最终打包部署上线。

webpack干的工作就如下图所示：

我们先来了解下webpack需要的一些铺垫性知识：

loader

webpack本身只能加载js/json模块，如果要加载其它类型的文件/模块, 就需要使用对应的loader进行转化和加载。

loader 可以将所有类型的文件转换为webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

loader自身也是运行在node.js环境中的JavaScript模块，其本身是一个函数，接收源文件作为参数，返回转化的结果。

loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转化功能，比如：css-loader，json-loader等。

插件

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

可以完成一些loader不能实现的功能；

使用插件一般在webpack的配置信息plugins选项中指定

UglifyJSPlugin: 压缩js文件

HtmlWebpackPlugin: 自动生成HTML文件

CleanWebpackPlugin: 自动清除指定文件夹资源

2.1 初始化项目

在工程的目录结构下，新建webpack_demo工程文件，并进行初始化，如下所示：

安装webpack （先安装全局的webpack，后安装局部webpack）

项目初始化

2.2 打包项目中的js和json文件

（一）新建单个js文件，如下图所示：

打开命令行执行打包代码：

打包成功后，你就可以引入bundle.js，其执行效果和引入main.js一样，在开发过程中，我们就可以把多个js文件都打包到bundle.js中，这样客户端请求资源就由多次变成一次。

运行结果如下图所示：

（二）新建多个js和json文件，如下图所示：

新建多个js文件，并在main.js中引入并调用。

运行结果：

新建多个json文件，并在main.js中引入并调用，如下图所示：

运行结果如下：

2.3 在webpack中使用配置文件

在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，所以 配置文件比在终端(terminal)中手动输入大量命令要高效的多。

2.4 打包项目中的CSS文件

首先安装并添加style-loader和css-loader模块：

创建main.css文件，写入样式，并在main.js中引入，然后通过webpack命令打包，如下图所示：

运行结果如下：

2.5 打包项目中的图片文件

首先安装并添加file-loader模块：

引入图片文件，在index.html中创建标签，在css文件中的样式里面使用图片背景，执行webpack打包到bundle.js文件，如下图所示：

运行结果：

通过上面的操作，我们可以了解到，如果要加载其它的资源，只需要配置好相应的loader，然后统一打包到bundle.js文件中运行即可。

接下来，我们思考一个问题：在开发过程中，每增删改某一块内容，都需要打包后才能正常运行，那我们能不能做到修改好动态打包运行呢？此时，借助服务器可以帮助实现这一操作。

2.6 自动编译打包

webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

(一) 下载安装

(二） 修改配置文件

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

(三） package配置

增加"start": "webpack-dev-server --open"选项。

(四）编译打包应用并运行

npm start

当功能开发完毕后，关掉服务器，执行webpack打包成本地文件即可。

2.7 webpack中各种插件的使用

在webpack中插件有很多，都是基于解决某一方面功能而产生的。大部分插件使用方式相同，我们可以做到举一反三。

（一） HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件， 其中包括使用 script 标签的 body 中的所有 webpack 包。

安装：

删除掉原先打包编译生成的dist文件夹，重新执行webpack，该插件会自动根据指定的模板页面帮助我们创建index.html文件，并做好相关配置引入，如下图所示：