webpack 的 Loader 和 Plugin 的区别,常见的 loader 和 plugin 有哪些?

结论先行:

1、 Loader 和 Plugin 的区别

Loader 也叫做就是"加载器",因为 webpack 原生只能解析 js 文件,而对于其他类型文件,则需要借助 loader。所以 loader 的作用就是实现对不同格式文件的解析和处理,例如把 ES6 转换成 ES5,TypeScript 转换为 JavaScript等,使其能够添加到依赖关系中。
Plugin 就是我们常说的"插件"。主要是扩展 webpack 的功能,增加额外的构建任务。例如打包优化、环境变量注入、优化构建速度等,它们会运行在 webpack 的不同阶段(钩子 / 生命周期),贯穿了 webpack 整个编译周期。

2、 常见的 loader 和 plugin 有哪些?

常见的 loader:

css-loader:处理 CSS 文件,使其能够在 JavaScript 模块中使用。

加载 CSS,支持模块化、压缩、文件导入等特性;

style-loader :将解析后的 css, 用 style 标签挂载到页面的 head 标签中;

babel-loader:把 ES6+ 转换成 ES5;

file-loader:将文件复制到输出目录,在代码中通过相对路径去引用输出的文件 (处理图片和字体);

url-loader:与 file-loader 类似,区别是用户可以设置一个阈值,大于阈值会交给 file-loader处理,小于阈值时以 base64 的⽅式把⽂件内容注⼊到代码中去(处理图片和字体);

eslint-loader:通过 ESLint 检查 JavaScript 代码;

image-loader:加载并且压缩图片文件;

常见的 plugin:

html-webpack-plugin :生成 HTML 文件,并自动将打包生成的 JS、CSS 文件注入到 HTML 文件中。

mini-css-extract-plugin :分离样式文件,将 CSS 提取到单独的⽂件中,⽀持按需加载

(替代extract-text-webpack-plugin);

terser-webpack-plugin : 支持压缩 ES6 代码(Webpack4);

webpack-bundle-analyzer :可视化 webpack 输出文件的体积;

webpack-parallel-uglify-plugin: 多进程执行代码压缩,提升构建速度

clean-webpack-plugin: 在每次构建前清理输出目录,避免旧文件残留。

uglifyjs-webpack-plugin:压缩 JavaScript 代码,减小文件体积 (Webpack4 以前);

optimize-css-plugin:压缩 CSS;

define-plugin:定义环境变量;

允许在编译时创建配置的全局对象; (Webpack4 之后指定 mode 会自动配置)

是一个 webpack 内置的插件,不需要安装

copy-webpack-plugin:将静态文件复制到输出目录。

如 Vue 的打包过程中,如果我们将一些文件放到 public 的目录下,那么这个目录会被复制到 dist 文件夹中

具体解析:

1、Loader

Webpack 中 loader 的作用是什么?常用 loader 有哪些?-CSDN博客

Loader 直译为"加载器"。

Webpack 将一切文件视为模块,但是 Webpack 原生是只能解析 js 文件,如果想将其他文件也打包的话,就会用到 loader

所以 loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力。

2、Plugin

Webpack 中 Plugin 的作用是什么?常用 plugin 有哪些?-CSDN博客

Plugin 直译为"插件"。

Plugin 可以扩展 webpack 的功能,让 webpack 具有更多的灵活性。

在 Webpack 运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。

3、不同的用法:

Loader 在 module.rules 中配置,也就是说他作为模块的解析规则而存在。

每个配置项包含了一个或多个规则对象,规定了哪些文件需要经过哪些 loader 进行处理。

类型为数组,每一项都是一个 Object,里面描述了对于什么类型的文件(test),使用什么加载 (loader) 和使用的参数(options

Pluginplugins 中单独配置。

类型为数组,每一项是一个 plugin 的实例,参数都通过构造函数传入。

4、总结

总结起来,loader 用于处理模块的转换工作,而 plugin 则用于扩展 webpack 的功能,增加额外的构建任务。

它们在 webpack 的配置文件中通过不同的配置项进行配置和使用。

相关推荐
Justinc.16 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia32 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫33 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民39 分钟前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾1 小时前
前端基础-html-注册界面
前端·算法·html
Dragon Wu1 小时前
前端 Canvas 绘画 总结
前端
Beamon__1 小时前
element-plus按需引入报错AutoImport is not a function
webpack·element-plus