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 的配置文件中通过不同的配置项进行配置和使用。

相关推荐
长天一色4 分钟前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_23422 分钟前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河24 分钟前
CSS总结
前端·css
BigYe程普1 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H1 小时前
前端的全栈混合之路Meteor篇:关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍1 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
axihaihai1 小时前
网站开发的发展(后端路由/前后端分离/前端路由)
前端
流烟默1 小时前
Vue中watch监听属性的一些应用总结
前端·javascript·vue.js·watch
2401_857297912 小时前
招联金融2025校招内推
java·前端·算法·金融·求职招聘
茶卡盐佑星_2 小时前
meta标签作用/SEO优化
前端·javascript·html