在没有使用任何自动化工具之前，如果用sass写了css, 用coffee写了js, 那么我们必须手动用相应的compiler去编译各自的文件，然后各自minify(js,css文件压缩并合并)。这时如果又有两张新图片，那么又需要用自己的小工具手动去压缩图片。于是为了解决前端这种总需要做很多重复工作的弊端，提高工作效率，于是就有人弄出了自动化流程的grunt/gulp，这样当写完代码后想要发布一个production版本，用一句gulp build就可以
- rm 掉dist文件夹中以前的旧文件
- 自动把sass编译成css, coffee编译成js
- 压缩各自的文件，压缩图片，生成图片sprite
- 拷贝minified/uglified文件到dist文件夹(uglifyjs用来压缩js文件， minify压缩并合并js,css)
但是它没有解决的是js 模块化的问题，（js模块化发展历程：http://web.jobbole.com/83761/）; 之前大家可以用require.js，sea.js来require依赖，后来就出现了webpack把所有文件（css, image, js）都看成是模块,都用js来生成依赖，最后生成一个bundle，所以webpack也叫做文件打包工具; 同时webpack为了解决可以require不同文件的需求引入了不同的loader， 比如面对sass文件有
- sass-loader，把sass转换成css
- css-loader让webpack能识别处理css
- style-loader把识别后的css插入到htmle的style中
类似的识别es6有babel-loader;
webpack实现了require everything, bundle everything;而且webpack还可以使用各种plugins，也可以实现文件的压缩合并等优化工作，再加上它本身优秀的解决模块依赖的能力，这样可以直接使用webpack来完成前端所有的自动化构建工作，perfect