为什么需要构建

源代码无法直接运行，需要转换成浏览器可以识别的js，html和css代码

构建包含的内容

• 代码转换
• 文件优化 （压缩...）
• 代码分割
• 模块合并
• 自动刷新
• 代码校验
• 自动发布

构建工具

npm script

在package.json文件中使用script字段定义任务，内置，无需安装其他依赖，但是功能简单，不能方便的管理多个任务。

Grunt

进化版的NpmScript，在Gruntfile.js配置文件立main写每个任务的具体执行代码和依赖关系。 灵活，只负责执行我们的任务，大量的可服用的插件封装好了常见的构建任务。 但是集成度不高（要写很多配置才能用，无法开箱即用）

Gulp

（Grunt的加强版？）基于流的自动化构建工具，通过gulp.task-注册一个任务,gulp.run-执行一个任务,gulp.watch-监听一个任务,gulp.src-读取文件,gulp.dest-写文件这五个方法几乎支持所有的构建场景。 灵活，可以单独完成任务，也可以和其他工具一起搭配使用。 但是集成度也不高，需要大量配置无法开箱即用

Fis3

功能：

• 读写文件-fis.match读文件，release配置文件的输出路径
• 资源定位-解析文件之间的依赖关系和文件位置
• 文件指纹-通过useHash配置输出文件时为文件url加上md5戳，来优化浏览器缓存
• 文件编译-通过parser配置文件解析器做文件转换，es6转化成es5
• 压缩资源-optimizer配置代码压缩方法
• 图片合并-sportier 集成各种web开发所需的构建功能，配置简单，开箱即用 官方已经不维护，不支持最新版的node

webpack

一切文件皆模块的思想（loader转换文件，plugin注入钩子） 优点：

• 专注处理模块化项目，开箱即用。
• 可通过plugin扩展
• 使用场景不局限与web
• 社区庞大，活跃
• 开发体验良好 缺点：只能用于采用模块化开发的项目

所以为什么使用webpack

• 新项目几乎都用模块化+新语言+新框架，webpack可以为这些新项目提供一站式解决方案
• 有良好的生态链和维护团队
• 有很多教程和经验分享