第一章：什么是webpack？
大胆构想:
自从es6诞生以后，我们可以通过vue，通过less非常优雅的编辑前端代码。但是，这些规范并不是一个系统化的东西，一个项目的诞生，从js框架的选择，插件，静态资源的管理和最终打包发布其实是流程化的东西：
让我们先回忆一下旧的开发模式：一个前端工程师做好一套html静态页面，然后再传给程序员进行数据端开发，数据端的开发是通过把php/java等服务端语法嵌入到html中，形成一个jsp或者php来响应用户的请求。
可这种做法有两个弊端：第一，用户体验差。同步请求下，页面的分页跳转会刷新整个页面，页面会回到顶部。这里涉及到了操作dom的概念，因为js创建dom节点，每次都要重新遍历dom树，这个操作是非常缓慢的。当你页面数据非常多的时候，每次重新请求刷新页面，这个体验非常不好。
第二，开发流程不合理，前端在开发的时候，后台编辑人员只能闲着，如果形成一种前后端分离的操作流程，后端人员可以和前端人员一起进行开发，效率是原来的两倍，把项目切分成一个模块一个模块来进行，事半功倍。前端只负责展现，后端只负责数据。
于是我们大胆构想，能不能有一种工具，能够让js代码优化，插件集成，项目静态资源管理都集成到一块，并且我还不用因为版本更新了而大费周章的重写代码呢。
前端自动化
伴随着中间语言nodejs的诞生，新开发模式随之出现了；nodejs是包依赖式的开发语言，如果你之前用过require.js的话，那么你理解我这一套理论将会轻车熟路。那么，究竟什么是新开发模式，新开发模式跟nodejs又有什么关系呢。
nodejs本身是基于js的，也就说，所有自动化的起点也是基于js的。我们第一步是要做到利用某种工具，对多个js包、插件进行合并。这里我们使用wabpack，利用webpack打包js和各种常用文件。
什么是webpack？
简单来说webpack帮助你集成vue，route，axios，vuex和lessloader等。最后你只要找到你的目录运行一个webpack命令就自动帮你压缩打包好了，非常的犀利。
但是，Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
意思就是，他只能处理js，如果你的项目里有css，你需要用css相关的loader 负载才可以使用，这点贼坑。
什么是WebPack，为什么要使用它？
WebPack和Grunt以及Gulp相比有什么特性
gulp可以自己定义开发流程，webpack是一次加载所有常用的包，这俩用到了最后其实没有太大的区别，因为gulp里的功能其实在webpack里面也可通过插件实现，gulp也可以象webpack一样工作，二者到了最后区别并不太大。
1、过去使用require和rjs等进行模块加载的方式，可以替换为webpack提供的指定loader去完成，你也可以自己开发加载特定资源的loader。
2、过去使用gulp和grunt完成项目构建优化的方式，可以替换成webpack提供的插件和特定的配置去完成。
3、由于模块的加载和项目的构建优化有机的结合，所以webpack能够更好的完成这项工作
4、并不是说有了webpack就淘汰的gulp等，有些特定的任务，还是要使用gulp去自定义完成的。但是不保证webpack的未来发展趋势会怎么样。
网友评论