Webpack常见的loader有哪些？

Webpack 支持大量的 loader，用于转换和打包不同类型的模块和资源。以下是一些常见且广泛使用的 loader：

1. babel-loader：用于将 ES6+ 代码转换成 ES5，以便在旧版浏览器中运行。

2. css-loader：用于处理 CSS 文件，将其转换为 JavaScript 模块，以便 Webpack 能够打包和引用它们。

3. style-loader：与 css-loader 配合使用，将 CSS 模块注入到浏览器的样式表中。

4. less-loader：用于处理 Less 文件，将其转换为 CSS。

5. sass-loader：用于处理 Sass 文件，将其转换为 CSS。

6. file-loader：用于处理图片、字体等静态资源文件，将它们复制到输出目录，并返回一个 URL 模块。

7. url-loader：类似于 file-loader，但是当文件小于指定的大小时，会返回一个 Data URL。

8. svg-url-loader：与 url-loader 类似，专门用于 SVG 文件。

9. json-loader：用于处理 JSON 文件，直接将其导入到 JavaScript 模块中。

10. raw-loader：用于处理文件内容，不对其进行任何转换，直接返回内容。

11. html-loader：用于处理 HTML 文件，可以将它们作为模块导入，并内联到其他 JavaScript 模块中。

12. markdown-loader：用于处理 Markdown 文件，将其转换为 HTML。

13. vue-loader：用于处理 Vue 组件文件，将 .vue 文件转换成 JavaScript 模块。

14. typescript-loader：用于处理 TypeScript 文件，将 TypeScript 转换为 JavaScript。

15. Imagelint loader：用于在构建过程中检查图像的元数据，如尺寸、格式和文件大小。

16. eslint-loader：用于在 Webpack 构建过程中运行 ESLint 检查。

这些 loader 可以单独使用，也可以组合使用，以处理复杂的模块和资源。在 Webpack 配置文件中，通过 module.rules 数组可以定义一系列的规则，这些规则指定了不同类型的文件应该使用哪些 loader 来处理。