在使用 Vue CLI 构建项目时，你通常搭配哪些加载器（loader）来处理资源或转换代码？
考察说明
考查候选人对 Vue CLI 构建链中 loader 的理解与实际运用经验。
回答思路
- 【回答框架 1】Vue CLI 基于 webpack，loader 用于将非 JS 文件或特定语法转换为可被打包的模块。常见 loader 包括 babel-loader 转译 ES6+ 与 JSX，vue-loader 处理单文件组件（SFC），css-loader 解析 CSS 中的 import 与 url，style-loader 将样式注入 DOM，以及 file-loader 或 url-loader 处理图片字体等静态资源。
- 【回答框架 2】在项目中，vue-loader 配合 vue-template-compiler 将 .vue 文件拆解为 script、template、style 三部分，并支持热更新。css 预处理器如 sass-loader、less-loader 需与对应语言包一起使用，按顺序串联在 style-loader 或 MiniCssExtractPlugin.loader 之后。
- 【回答框架 3】图片和字体常用 url-loader 进行 base64 内联小体积资源，超过阈值则交给 file-loader 输出到指定目录并重写 URL。对于资源引用路径，可利用 publicPath 配置调整。
- 【回答框架 4】实际配置中，loader 遵循从右到左的执行顺序，需根据文件类型设置 test 匹配规则，并通过 exclude 排除 node_modules 以提升构建性能。
- 【回答框架 5】版本差异上，Vue CLI 3+ 的内部配置已预设大部分 loader，个人自定义 loader 时多在 vue.config.js 的 configureWebpack 或 chainWebpack 中追加规则。
- 【关键点 1】babel-loader 用于转译现代 JS 语法；vue-loader 处理单文件组件。
- 【关键点 2】css-loader 解析样式依赖，style-loader 或 MiniCssExtractPlugin 负责注入或提取样式。
- 【关键点 3】url-loader 可按大小自动内联或委托给 file-loader 处理静态资源。
- 【关键点 4】loader 执行顺序为从右到左，配置时需准确匹配 test 并控制 exclude。
- 【关键点 5】在 Vue CLI 3+ 中可通过 chainWebpack 灵活调整已有 loader 规则。
- 【易错点 1】混淆 loader 与 plugin，loader 只做模块转换，不负责优化、清理等构建附加功能。
- 【易错点 2】忽略 loader 顺序导致样式或语法处理失败，例如 style-loader 应位于 css-loader 之前。
- 【易错点 3】过度使用 url-loader 内联大资源，会使打包产物体积膨胀。