面试官：webpack有哪些常用的loader和plugin

loader

1. babel-loader：用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。
2. css-loader：用于解析 CSS 文件，处理 CSS 中的 url() 等。
3. style-loader：将 CSS 代码以 <style> 标签的形式插入到 HTML 文件中。
4. sass-loader：用于解析 SASS/SCSS 文件，将其转换为 CSS。
5. less-loader：用于解析 Less 文件，将其转换为 CSS。
6. file-loader：用于处理文件，将文件输出到指定的目录，并返回文件 URL。
7. url-loader：类似于 file-loader，但可以根据文件大小将文件转换为 base64 编码的 Data URL。
8. image-webpack-loader：优化图片文件，包括压缩、优化格式等。
9. eslint-loader：用于在构建过程中进行 ESLint 静态代码检查。
10. postcss-loader：用于使用 PostCSS 处理 CSS 文件，可以实现自动添加浏览器前缀、压缩 CSS 等功能。
11. ts-loader：用于处理 TypeScript 文件，将 TypeScript 编译为 JavaScript。
12. vue-loader：用于处理 Vue 单文件组件，将其转换为 JavaScript 模块。

plugin

1. HtmlWebpackPlugin：用于自动生成 HTML 文件，并将打包后的资源文件自动引入到 HTML 文件中。
2. MiniCssExtractPlugin：用于将 CSS 文件提取为单独的文件，并输出到指定的目录。
3. CleanWebpackPlugin：用于在每次构建前清理输出目录，以确保输出文件的干净。
4. DefinePlugin：用于定义全局常量，可以在代码中直接使用，如定义环境变量等。
5. OptimizeCssAssetsPlugin：用于压缩 CSS 文件，优化 CSS 输出。
6. uglifyjs-webpack-plugin：用于压缩 JavaScript 代码，优化 JavaScript 输出。
7. CopyWebpackPlugin：用于复制文件或整个目录到构建目录中。
8. ProvidePlugin：用于自动加载模块，无需 import 或 require，可以在全局范围内使用。
9. BundleAnalyzerPlugin：用于分析打包后的模块构成和大小，并生成可视化报告。
10. SplitChunksPlugin：用于分割代码块，提取公共模块，减少重复代码，优化加载性能。
11. HotModuleReplacementPlugin：用于启用热模块替换（HMR），在开发环境中实现模块的热更新。
12. FriendlyErrorsWebpackPlugin：用于友好地输出构建错误和警告信息。