撩课-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文件,并做好相关配置引入,如下图所示:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181226A0VQOV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券