webpack与grunt、gulp的不同

一.webpack与grunt、gulp的不同

三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等

grunt和gulp是基于任务和流（Task、Stream）的，类似jQuery，找到一个（或一类）

文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成一个任务，，多个任务就构成了整个web的构建流程

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

总结：

   从构建思路上来说

• gulp和grunt需要开发者将前端构建过程拆分多个Task,并合理控制所有Task的调用关系，webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader 做何种解析和加工      

    从知识背景来说

•  gulp更像后端开发者的思路，需要对于整个流程了如指掌，webpack更倾向于前端开发者的思路

二.与webpack类似的工具还有哪些？谈谈为何选择使用或弃用webpack

同样是基于入口打包工具还有以下几个主流的：

webpack、 rollup、 parcel

webpack适用于大型复杂的前端站点构建

rollup适用于基础库的打包，如：vue、react

parcel适用于简单的实验性项目，满足低门槛的快速看到效果（打包过程中给出的调式信息十分有限，一旦打包出现错误难以调试，所以不建议复杂项目使用parcel）

三.有哪些常见的Loader（加载器）？他们是解决什么问题的？

file-loader：把文件输出到另一个文件中，在代码中通过相对URL去引用输出文件

url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去

source-map-loader：加载额外的source Map 文件，以方便断电调试

image-loader：加载并压缩图片文件

babel-loader： 把ES6转成ES5

css-loader：加载CSS，支持模块化、压缩、文件导入等特性

style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS

eslint-loader：通过ESLint检查JavaScript代码

四.有哪些常见的Plugin？他们解决什么问题

define-plugin：定义环境变量

Commons-chunk-plugin：提取公共代码

uglify-webpack-plugin：通过UglifyES压缩ES6代码