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做何种解析和加工

猜你喜欢

转载自blog.csdn.net/weixin_43912756/article/details/108438798
今日推荐