原文参考： https://zhuanlan.zhihu.com/p/341692197

一：整体

1、单文件组件（SFC，.vue 文件）

以 Webpack4 为例

  1. <template>
  3. </template>
  5. <script>
  6.   export default {
  8.   }
  9. </script>
  11. <style>
  12. </style>

Webpack 需要增加 vue-loader 和 vueLoaderPlugin 对 SFC 进行支持。
样式： vue-style-loader、 css-loader

2、template、script、style 代码块切分

打包编译之后会被转化为 import 引入
./packages/button/src/button.vue?vue&type=template&id=ca859fb4
./packages/button/src/button-group.vue?vue&type=script&lang=js
image.png
例如： foo.vue?type=template&id=xxxxx

  1. module.exports = function (source) {
  2.   // ...
  3.   // 解析源码，得到描述符
  4.   const descriptor = parse({ source, ... });
  5.   // 处理 template 块
  6.   let templateImport = `var render, staticRenderFns`
  7.   let templateRequest
  8.   if (descriptor.template) {
  9.     const src = descriptor.template.src || resourcePath
  10.     const idQuery = `&id=${id}`
  11.     const scopedQuery = hasScoped ? `&scoped=true` : ``
  12.     const attrsQuery = attrsToQuery(descriptor.template.attrs)
  13.     const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${inheritQuery}`
  14.     const request = templateRequest = stringifyRequest(src + query)
  15.     templateImport = `import { render, staticRenderFns } from ${request}`
  16.   }
  18.   // 处理 script 块
  19.   let scriptImport = `var script = {}`
  20.   if (descriptor.script) {
  21.     const src = descriptor.script.src || resourcePath
  22.     const attrsQuery = attrsToQuery(descriptor.script.attrs, 'js')
  23.     const query = `?vue&type=script${attrsQuery}${inheritQuery}`
  24.     const request = stringifyRequest(src + query)
  25.     scriptImport = (
  26.       `import script from ${request}\n` +
  27.       `export * from ${request}` // support named exports
  28.     )
  29.   }
  31.   // 处理 styles 块 （支持多 style 块）
  32.   let stylesCode = ``
  33.   if (descriptor.styles.length) {
  34.     stylesCode = genStylesCode(
  35.       loaderContext,
  36.       descriptor.styles,
  37.       id,
  38.       resourcePath,
  39.       stringifyRequest,
  40.       needsHotReload,
  41.       isServer || isShadow // needs explicit injection?
  42.     )
  43.   }
  44.   // Vue 还支持自定义块
  45.   if (descriptor.customBlocks && descriptor.customBlocks.length) { ... }
  46.   // ...
  47. }

vue-loader把vue文件中的template、javascript、style代码块分别转化为相应的 import 逻辑

二：VueLoaderPlugin 的作用

?vue&type=template 的作用是什么？可以从 VueLoaderPlugin 中找出答案，首先我们先了解 Webpack 中的 Plugin 能做什么。

1. Plugin 的特性

Plugin 的作用，主要有以下两条：

  1. 能够 hook 到在每个编译(compilation)阶段触发的所有关键事件。
  2. 在插件实例的 apply 方法中，可以通过compiler.options获取 Webpack 配置，并进行修改。

VueLoaderPlugin 通过第二个特性，在初始化阶段，对 module.rules 进行动态修改。

2. VueLoaderPlugin 预处理

VueLoaderPlugin 的处理流程中，修改了module.rules，在原来的基础上加入了 pitcher 和 cloneRules这一步的作用是：新增的 rule ，能识别形如?vue&type=template的querystring，让不同语言的代码块匹配到对应的 rule。

  1. class VueLoaderPlugin {
  2.   apply (compiler) {
  3.      // 标识 VueLoaderPlugin 已被加载
  4.      // add NS marker so that the loader can detect and report missing plugin
  5.     if (compiler.hooks) {
  6.       // webpack 4
  7.       compiler.hooks.compilation.tap(id, compilation => {
  8.         const normalModuleLoader = compilation.hooks.normalModuleLoader
  9.         normalModuleLoader.tap(id, loaderContext => {
  10.           loaderContext[NS] = true
  11.         })
  12.       })
  13.     } else {
  14.       // webpack < 4
  15.       compiler.plugin('compilation', compilation => {
  16.         compilation.plugin('normal-module-loader', loaderContext => {
  17.           loaderContext[NS] = true
  18.         })
  19.       })
  20.     }
  22.      // 重头戏，对 Webpack 配置进行修改
  23.      const rawRules = compiler.options.module.rules;
  24.      const { rules } = new RuleSet(rawRules);
  26.     // for each user rule (expect the vue rule), create a cloned rule
  27.     // that targets the corresponding language blocks in *.vue files.
  28.     const clonedRules = rules
  29.       .filter(r => r !== vueRule)
  30.       .map(cloneRule)
  32.     // global pitcher (responsible for injecting template compiler loader & CSS
  33.     // post loader)
  34.     const pitcher = {
  35.       loader: require.resolve('./loaders/pitcher'),
  36.       resourceQuery: query => {
  37.         const parsed = qs.parse(query.slice(1))
  38.         return parsed.vue != null
  39.       },
  40.       options: {
  41.         cacheDirectory: vueLoaderUse.options.cacheDirectory,
  42.         cacheIdentifier: vueLoaderUse.options.cacheIdentifier
  43.       }
  44.     }
  46.      // 替换初始 module.rules，在原有 rule 上，增加 pitcher、clonedRules
  47.      compiler.options.module.rules = [
  48.        pitcher,
  49.        ...clonedRules,
  50.        ...rules
  51.      ];
  52.   }
  53. }

VueLoaderPlugin 对 rules 的修改，用下图可以更直观地理解各部分 Rule 的作用。(这里有一个小的知识点，除了常见的Rule.test选项外，Rule.resourceQuery选项可以对资源的 querystring 进行匹配)
下图展示VueLoaderPlugin 对 module.rules 的修改:
image.png

三：回到 Loader

上一节梳理了 VueLoaderPlugin 在初始化阶段的预处理，这一节我们继续回到构建阶段中，看看以 VueLoader 为中心如何协调其它 Loader ，得到每个代码块的构建结果。同样地，我们先了解一下 Webpack 的 loader 特性。

1、Webpack 的 loader 运行顺序

对于 loader ，我们知道它们的执行是有顺序的，如果是这样的配置，运行的顺序将是 c-loader -> b-loader -> a-loader。

  1. module.exports = {
  2.   module: {
  3.     rules: [{
  4.       ...
  5.       use: ['a-loader', 'b-loader', 'c-loader'],
  6.     }],
  7.   },
  8. };

不过，在实际（从右到左）执行 loader 之前，会先从左到右调用 loader 上的 pitch 方法。

  1. |- a-loader `pitch`
  2.   |- b-loader `pitch`
  3.     |- c-loader `pitch`
  4.       |- requested module is picked up as a dependency
  5.     |- c-loader normal execution
  6.   |- b-loader normal execution
  7. |- a-loader normal execution

并且在 loader 的 pitch 方法中，如果有实际的返回值，将会跳过后续的 loader，比如在 b-loader 的 pitch 中，如果返回了实际值，将会产生下面的执行顺序。

  1. # 注意 a-loader 依然会正常执行，跳过的是 c-loader
  2. |- a-loader `pitch`
  3.   |- b-loader `pitch` returns a module
  4. |- a-loader normal execution

知道这个特性，有利于我们理解 SFC 中各代码块在 loader 中的处理顺序。

2、SFC 转化流程

还记得第一节生成的编译结果吗？每个代码块都导出了对应逻辑，我们以 script 块为例，结合第二节的 PitcherLoader 再次进行转化，转化后的结果为：
下图展示script 块的转化流程：
image.png
最后的 import 语句，使用了内联方式的 import 语法，我们拆分一下便于理解

  1. # 原import
  2. -!../../node_modules/babel-loader/lib/index.js??ref--2-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./demo.vue?vue&type=script&lang=js&";
  4. # Part1 -! 
  5. # 将禁用所有已配置的 preLoader 和 loader，但是不禁用 postLoaders
  7. # Part2 ../../node_modules/babel-loader/lib/index.js??ref--2-0
  8. # 参考小节：VueLoaderPlugin 的预处理，demo.vue 会自动添加 .js 后缀，以匹配所有 js 的 Rule，这里使用 babel-loader 处理 js 模块
  10. # Part3 ../../node_modules/vue-loader/lib/index.js??vue-loader-options 
  11. # /\.vue$/ 规则匹配到 demo.vue，并使用 vue-loader 处理 .vue 后缀
  13. # Part4 ./demo.vue?vue&type=script&lang=js&

3、PitchLoader

上述的转化发生在 PitchLoader 中，对 PitchLoader 的实现逻辑感兴趣的同学，可以阅读 loader/pitcher.js 的源码：

  1. // PitcherLoader.pitch 方法，所有带 ?vue 的模块请求，都会走到这里
  2. module.exports.pitch = function (remainingRequest) {
  3.   // 如 ./demo?vue&type=script&lang=js
  4.   // 此时，loaders 是所有能处理 .vue 和 .xxx 的 loader 列表
  5.   let loaders = this.loaders;
  6.   ...
  7.   // 得到 -!babel-loader!vue-loader!
  8.   const genRequest = loaders => { ... };
  10.   // 处理 style 块 和 template 块，支持
  11.   if (query.type === 'style') { ... }
  12.   if (query.type === 'template') { ... }
  14.   // 处理 script 块和 custom 块
  15.   return `import mod from ${request}; export default mod; export * from ${request}`;
  16. }

4、再次执行 VueLoader

细心的同学可能发现了，在 PitchLoader 的转化结果中，还是会以 vue-loader 作为第一个处理的 loader，但 vue-loader 不是一开始就转化过了吗 ？与第一次不同的是，这次 vue-loader 的作用，仅仅是把 SFC 中语法块的源码提取出来，并交给后面的 loader 进行处理
下图展示第二次进入 vue-loader
image.png

  1. const selectBlock = require('./select')
  3. // if the query has a type field, this is a language block request
  4. // e.g. foo.vue?type=template&id=xxxxx
  5. // and we will return early
  6. // 如果querystring 包含了 type 参数，则直接返回该块的代码
  7. if (incomingQuery.type) {
  8.   return selectBlock(
  9.     descriptor,
  10.     loaderContext,
  11.     incomingQuery,
  12.     !!options.appendExtension
  13.   )
  14. }
  1. module.exports = function selectBlock (
  2.   descriptor,
  3.   loaderContext,
  4.   query,
  5.   appendExtension
  6. ) {
  7.   // template
  8.   if (query.type === `template`) {
  9.     if (appendExtension) {
  10.       loaderContext.resourcePath += '.' + (descriptor.template.lang || 'html')
  11.     }
  12.     loaderContext.callback(
  13.       null,
  14.       descriptor.template.content,
  15.       descriptor.template.map
  16.     )
  17.     return
  18.   }
  20.   // script
  21.   if (query.type === `script`) {
  22.     if (appendExtension) {
  23.       loaderContext.resourcePath += '.' + (descriptor.script.lang || 'js')
  24.     }
  25.     loaderContext.callback(
  26.       null,
  27.       descriptor.script.content,
  28.       descriptor.script.map
  29.     )
  30.     return
  31.   }
  33.   // styles
  34.   if (query.type === `style` && query.index != null) {
  35.     const style = descriptor.styles[query.index]
  36.     if (appendExtension) {
  37.       loaderContext.resourcePath += '.' + (style.lang || 'css')
  38.     }
  39.     loaderContext.callback(
  40.       null,
  41.       style.content,
  42.       style.map
  43.     )
  44.     return
  45.   }
  47.   // custom
  48.   if (query.type === 'custom' && query.index != null) {
  49.     const block = descriptor.customBlocks[query.index]
  50.     loaderContext.callback(
  51.       null,
  52.       block.content,
  53.       block.map
  54.     )
  55.     return
  56.   }
  57. }

至此，vue-loader 里面的处理逻辑基本已经梳理完成～各部分代码块也传入后续的 loader 中进行解析和转化。

四、总结

image.png