一、webpack的基本功能

模块化，依赖处理，打包
（1）、依赖管理：方便引用第三方模块，让模块更加容易复用、避免全局注入导致的冲突,避免重复加载或者加载不必要的模块；
（2）、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的连接的请求次数，配合uglify.js可以减少、优化代码的体积

（3）、各种插件：babel把ES6+转化为ES5-，eslint可以检查编译时的各种错误

二、webpack的工作原理

简单的说就是分析代码，找到'require','exports','define'等关键词，并替换成对应模块的引用。

webpack是一切皆模块化，把所有的css文件和js文件放在一个总的入口文件，通过require引入，剩下的事情webpack会处理，包括所有模块的前后依赖关系，打包、压缩并合成一个js文件。

（1）、编译jsx，ES6，less，sass等，
（2）、开启本地服务器，一边改写代码，一边自动更新页面内容；
（3）、异步加载内容，不需要时不加载到DOM；
（4）、和vue，react等一起开发

三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对主流。

grunp和gulp是基于任务和liu（task、stream）的，找到一个文件或者一类文件，对其做一系列链式操作，更新流上的数据。整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。

webpack是基于入口的，webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理不同的文件，用plugin来扩展webpack的功能。