vue-loader 原理、loader 与 plugin 配置

当使用 Webpack 构建 Vue 项目时，vue-loader 是连接 .vue 单文件组件和 Webpack 构建流程的核心桥梁。它让 Webpack 能够理解 .vue 文件的 <template>、<script>、<style> 三个代码块，并分别交给对应的 loader 进行处理。

vue-loader 的核心原理

一个 .vue 文件本身不是合法的 JavaScript 或任何浏览器能直接执行的代码。vue-loader 做的事情可以拆解为两步：

解析 SFC：将 .vue 文件解析为一个 描述对象（Descriptor），其中记录了 <template>、<script>、<style> 块的内容和属性（比如 <style scoped>、<script setup> 标记）。

分发处理：根据描述对象生成一个新的 “渲染请求”，这个请求实际上包含多个子请求，通过 Webpack 的 pitch loader 机制，让不同的内容块分别路由给不同的 loader：

<template>：编译为 render 函数，通常使用 vue-loader 内置的模板编译器（基于 @vue/compiler-sfc），输出 JavaScript 代码。
<script>：原样保留 JavaScript/TypeScript 代码，交给 babel-loader、ts-loader 等处理。
<style>：提取或转换为 CSS，交给 css-loader、postcss-loader、sass-loader 等处理，同时支持 scoped 作用域样式的自动哈希处理。

最终，vue-loader 会把这些处理后的结果重新组装成一个标准的 ES module，导出一个 Vue 组件选项对象。

loader 配置

在 webpack.config.js 中，需要为 .vue 文件配置一条规则，指定使用 vue-loader。同时，为了保证其他 loader 能正确处理 .vue 文件中的 JS 和 CSS，通常也需要对这些文件类型配置对应的 loader。

一个典型的配置如下：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // .vue 文件的处理规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // .js 文件的处理规则（处理 .vue 中的 <script> 块）
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      // .css 文件的处理规则（处理 .vue 中的 <style> 块）
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      // 如果使用 SCSS，可以添加：
      {
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
}

关键点说明：

vue-style-loader 与 style-loader 类似，但对 Vue 组件的样式注入有更好的支持（比如支持服务端渲染时的样式提取）。
如果项目使用 TypeScript，可以在 .vue 文件的 <script> 块中写 lang="ts"，然后让 vue-loader 结合 ts-loader 或 @babel/preset-typescript 自动处理。

plugin 配置：VueLoaderPlugin

除了配置 loader，必须在 plugins 数组中加入 VueLoaderPlugin，否则 vue-loader 无法正常工作。

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

它的作用：

将所有应用于 .js 文件的 loader 规则（如 babel-loader）自动复制到 .vue 文件的 <script> 块上，避免重复配置。
将所有应用于 .css/.scss 等文件的规则自动应用到 .vue 文件的 <style> 块上。
为模板编译过程中产生的 import 语句提供正确的模块解析路径。

简单说，没有 VueLoaderPlugin，Webpack 只会把 .vue 文件当作普通文本交给 vue-loader，但无法识别和处理其中的依赖关系（比如 @import、src 引用等），导致构建失败。

真实项目中的小贴士

Vue 3 推荐使用 vue-loader@^16，它内部集成了 @vue/compiler-sfc，无需再额外安装编译器。
如果同时使用 thread-loader 或 cache-loader 进行加速，需要注意它们与 vue-loader 的兼容配置顺序，通常把缓存放在最外层。
当遇到 “You must use the VueLoaderPlugin” 报错时，就检查一下是否在 plugins 中正确引入了该插件。

掌握了 vue-loader 的原理和配置，才能让 Webpack 和 Vue 单文件组件无缝协作，这也是早期 Vue 工程化的基础。随着 Vite 的普及，Vite 内部利用 @vitejs/plugin-vue 直接编译 SFC，不再需要 vue-loader，但了解其原理仍然有助于理解组件编译的本质。