loader 和plugin的区别是什么？

参考：webpack原理
前端面试-webpack篇

1、使用webpack一般配置什么？

webpack是一个静态模块处理器，当其处理应用程序时，会递归的构建一个关系依赖图，其中包含应用程序需要的每个模块，然后把所有这些模块打包成一个或多个包

2、 使用webpack的打包过程

1. 初始化：启动构建，读取和合并参数，加载plugin，实例化complier
2. 编译：从Entry出发，针对每个Module串行调用对应的loader去翻译文件内容，再找到该Module依赖的Module，递归地进行编译处理
3. 输出：对编译后的Module组合成Chunk，把Chunk转换成文件，输出到文件系统

3、常用的loader

• file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
• source-map-loader：加载额外的 Source Map 文件，以方便断点调试
• image-loader：加载并且压缩图片文件
• babel-loader：把 ES6 转换成 ES5
• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• eslint-loader：通过 ESLint 检查 JavaScript 代码

4、常用的plugin

• define-plugin：定义环境变量
• commons-chunk-plugin：提取公共代码
• uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码

5、 loader和plugin的区别

1. 两者都是为了扩展webpack的功能。loader它只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译; 而plugin不仅只局限在打包，资源的加载上，还可以打包优化和压缩，重新定义环境变量等
2. loader运行在打包文件之前（loader为在模块加载时的预处理文件）；plugins在整个编译周期都起作用
3. 一个loader的职责是单一的，只需要完成一种转换。一个loader其实就是一个Node.js模块。当需要调用多个loader去转换一个文件时，每个loader会链式的顺序执行
4. 在webpack运行的生命周期中会广播出许多事件，plugin会监听这些事件，在合适的时机通过webpack提供的API改变输出结果

6、webpack ，gulp和grunt

grunt和gulp是基于任务和流（Task、Stream），找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
从构建思路上来说， gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系； webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工