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）
Plugin 在 plugins 中单独配置。
类型为数组，每一项是一个
plugin的实例，参数都通过构造函数传入。
4、总结
总结起来，loader 用于处理模块的转换工作，而 plugin 则用于扩展 webpack 的功能，增加额外的构建任务。
它们在 webpack 的配置文件中通过不同的配置项进行配置和使用。