为什么要使用webpack？

在网页中会引用到哪些常见的静态资源？

1. js (.js  .jsx  .coffee  .ts)
2. css (.css  .less  .sass  .scss scss是sass的plus版)
3. images(.jpg  .png  .gif  .bmp  .svg)
4. videos
5. audios
6. fonts(.svg  .ttf  .eot  .woff  .woff2)
7. templates(.ejs  .jade .vue)

网页中引入的静态资源多了以后会有什么问题？

1. 网页加载速度慢，因为我们要发起很多的二次请求
2. 要处理错综复杂的依赖关系

如何解决上诉两个问题？

1. 合并、压缩、精灵图(雪碧图：css sprites)、图片的base64编码
2. 可以使用requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系

什么是webpack?

　　  webpack是前端静态资源打包工具，它通过递归查找的方式查找各个模块之间的依赖关系，并且打包成一个或多个bundle(它是基于Node.js开发出来的一个前端工具)

如何完美实现上述的2种解决方案?

1. 使用Gulp，是基于task任务的
2. 使用webpack，是基于整个项目进行构建的