什么是webpack?css
现今的网页能够看作是功能丰富的应用,拥有着复杂的js代码和一大堆依赖包。为了简化开发的复杂程度,有了不少好用的实践方法前端
模块化 让咱们能够把复杂的程序细化为小的文件webpack
相似于TypeScript这种在js基础上拓展的开发语言,使咱们可以实现目前版本的Js不能直接使用的特性,而且能够转换为js文件让浏览器能够识别web
less saas等css预编译浏览器
可是利用他们开发的文件每每须要进行额外的处理才能让浏览器识别,手动又很麻烦,就出现相似webpack类的工具。less
webpack能够看作是模块打包机器:它作的事情是,分析你的项目结构,找到js模块以及其余的一些浏览器不能直接运行的语言(ty等)并将其转换和打包为合适的格式供浏览器使用。模块化
其实Webpack和另外两个并无太多的可比性,Gulp/Grunt是一种可以优化前端的开发流程的工具,而WebPack是一种模块化的解决方案,不过Webpack的优势使得Webpack在不少场景下能够替代Gulp/Grunt类的工具。工具
Grunt和Gulp的工做方式是:在一个配置文件中,指明对某些文件进行相似编译,组合,压缩等任务的具体步骤,工具以后能够自动替你完成这些任务。优化
webpack工做方式是:把你的项目当作是一个总体,经过一个给定的主文件,如(index.js),webpack将从这个文件开始找到你的项目的全部依赖文件,使用loaders处理他们,最后打包为一个或者多个浏览器可识别的js文件spa