大家好！我是萝卜不带泥，webpack作为目前最流行的构建工具，几乎成为前端同学武器库中必备的工具之一，写这个系列文章的用意就是想把自己在平时工作中使用webpack的一些经验和心得和大家分享，也是对自己这些年的前端工作做一个阶段性的总结，希望能给大家带来些许的帮助。

在学习webpack前，需要先知道为什么要用webpack，我将从以下两个方面进行讲解：

一、前端发展的需要

近些年，前端世界翻天覆地，新思想和新框架不断涌现，我们可以通过模块化的思想来组织代码，诸如CommonJS、ES6模块化标准规范给前端开发带来了极大的效率提升，但是它们都必须通过工具转换成标准的ES5才能直接运行在浏览器环境下。我们可以使用React、Vue来重构已有的项目或者开发新的项目，React框架通过将JSX语法引入到Javascript语言层面中，可灵活的控制试图的渲染逻辑。Vue框架将HTML模板、Javascript逻辑代码、CSS样式都写在一个文件里。这些框架都通过组件化的方式组织代码，减少开发难度，提升开发效率。但是它们的问题也是无法直接在现成的Javascript引擎里运行，必须经过转换。我们还可以使用新的语言如：ES6、TypeScript、SCSS、LESS等，使用这些新语言可以提升编码效率，但是必须将源代码转换成可以直接在浏览器环境下运行的代码。

我们在感叹前端技术发展之快的同时也面临着更大的挑战，通过直接编写Javascript、CSS、HTML开发Web应用的方式已经无法应对当前Web应用的发展，我们必须通过构建的方式，将源代码转换成可执行的Javascript、CSS、HTML代码，包括如下内容：

1. 代码转换：将TypeScript编译成Javascript，将SCSS编译成CSS等。

2. 文件优化：压缩Javascript、CSS、HTML代码，压缩合并图片等。

3. 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载。

4. 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。

5. 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。

6. 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。

7. 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化的执行这一系列复杂的流程。

二、常见的构建工具对比

近些年先后出现了一系列构建工具，它们各有优缺点，由于前端工程师熟悉Javascript，Nodejs又可以胜任所有构建需求，所以大多数构建工具都是用Nodejs开发的，下面就对常见的构建工具进行对比。

Grunt

Grunt是一个任务执行者，有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化的执行依赖的任务，每个任务的具体执行代码和依赖关系都写在配置文件Gruntfile.js里，Grunt的优点是：

1. 灵活，它只负责执行我们定义的任务。

2. 大量的可复用插件封装好了常见的构建任务。

3. Grunt的缺点是集成度不高，要写很多配置后才可以使用，无法做到开箱即用。

Gulp

Gulp是一个基于流的自动化构建工具，除了可以管理和执行任务，还支持监听文件、读写文件。Gulp被设计的非常简单，只通过下面5种方法就可以支持几乎所有构建场景：

1. 通过gulp.task注册一个任务。

2. 通过gulp.run执行任务。

3. 通过gulp.watch监听文件的变化。

4. 通过gulp.src读取文件。

5. 通过gulp.dest写文件。

Gulp的最大特点是引入了流的概念，同时提供了一系列常用的插件去处理流，流可以在插件之间传递。Gulp的优点是好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用，其缺点和Grunt类似，集成度不高，要写很多配置后才可以使用，无法做到开箱即用。

可以将Gulp看作Grunt的加强版。相对于Grunt，Gulp增加了监听文件、读写文件、流式处理的功能。

Fis3

Fis3是一个国产的构建工具，由百度的团队开发和维护，相对于Grunt、Gulp这些只提供了基本功能的工具，Fis3集成了Web开发中的常用构建功能：

1. 读写文件：通过fis.match读文件，release配置文件的输出路径。

2. 资源定位：解析文件之间的依赖关系和文件位置。

3. 文件指纹：在通过useHash配置输出文件时为文件URL加上md5戳，来优化浏览器缓存。

4. 文件编译：通过parser配置文件解析器做文件转换，例如将ES6编译成ES5。

5. 压缩资源：通过optimizer配置代码压缩方法。

6. 图片合并：通过spriter配置合并CSS里导入的图片到一个文件中，减少HTTP请求数。

Fis3的优点是集成了各种Web开发所需的构建功能，配置简单、开箱即用。其缺点是目前官方已经不再更新和维护，不支持最新版本的Nodejs。

Webpack

Webpack是一个打包模块化Javascript的工具，在Webpack里一切文件皆模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件，Webpack专注于构建模块化项目，这样的好处是能清晰的描述各个模块之间的依赖关系，以方便Webpack对模块进行组合和打包，经过Webpack的处理，最终会输出浏览器能使用的静态文件。Webpack的优点是：

1. 专注于处理模块化的项目，能做到开箱即用、一步到位。

2. 可通过Plugin扩展，完整好用又不失灵活。

3. 使用场景不局限于Web开发。

4. 社区庞大灵活，经常引入紧跟业界的新特性，能为大多数场景找到已有的开源扩展。

5. 良好的开发体验。

Webpack的缺点是只能用于采用模块化开发的项目。

三、为什么选择Webpack

这些构建工具都有各自的定位和专注点，它们之间既可以单独完成任务，也可以相互搭配来弥补各自的不足，之所以我们在开发中选择webpack作为常用的构建工具，主要原因是：

1. 大多数团队在开发项目时基本都会采用“模块化+新语言+新框架“，webpack可以提供一站式的解决方案。

2. Webpack有良好的生态链和维护团队，能够提供良好的开发体验并保证质量。

3. Webpack被全世界大量的Web开发者使用和验证，能找到各个层面所需的教程和经验分享。

欢迎大家继续关注我的文章，下一节我们将进入webpack的世界！