webpack gulp grunt 简单介绍

本文主要是讲下webpack的相关知识点，理论比较多，因为webpack的功能非常强大，说到的也基本都是经常用到的。

这三个工具都属于前端自动化的工具，都是第三方的，并且国内很多大型团队也都有自己成熟的自动化部署工具，如百度有FIS,腾讯有Modjs等 ；

下面简单说下他们的区别：

grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查。

gulp.js - 基于流的自动化构建工具，也就是基于nodejs stream基础实现的。

　　易于使用
　　通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
　　构建快速
　　利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载，公共代码提取，通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等，也就是说webpack不同于gulp grunt 这两个是纯工具，webpack最大的特点就是自身支持模块化儿，任何资源都可以作为模块来引入。

大家对这几个工具的执行原理有兴趣的也可以自己研究下，相信会有精彩的发现。。今天就是跟大家简单的介绍下概念的东西，具体的配置咱们以后也会说道，到时候会具体说webpack的配置。