{
 test: /\.vue$/,
 loader: 'vue-loader'
}
// 當(dāng)引入vue后綴文件時，將文件內(nèi)容傳輸給vue-loader進(jìn)行處理
import Foo from './source.vue'

{
 resourceQuery: /shymean=true/,
 loader: path.resolve(__dirname, './test-loader.js')
}
// 當(dāng)引入文件路徑攜帶query參數(shù)匹配時，也將加載該loader
import './test.js?shymean=true'
import Foo from './source.vue?shymean=true'

a.pitch -> b.pitch -> c.pitch -> request module -> c -> b -> a

// loader文件導(dǎo)出的真實接口，content是上一個loader或文件的原始內(nèi)容
module.exports = function loader(content){
 // 可以訪問到在pitch掛載到data上的數(shù)據(jù)
 console.log(this.data.value) // 100
}
// remainingRequest表示剩余的請求，precedingRequest表示之前的請求
// data是一個上下文對象，在上面的loader方法中可以通過this.data訪問到，因此可以在pitch階段提前掛載一些數(shù)據(jù)
module.exports.pitch = function pitch(remainingRequest, precedingRequest, data) {
 data.value = 100
}}

// vue-loader/lib/plugin.js
const rawRules = compiler.options.module.rules // 原始的rules配置信息
const { rules } = new RuleSet(rawRules)

// cloneRule會修改原始rule的resource和resourceQuery配置，攜帶特殊query的文件路徑將被應(yīng)用對應(yīng)rule
const clonedRules = rules
   .filter(r => r !== vueRule)
   .map(cloneRule) 
// vue文件公共的loader
const pitcher = {
 loader: require.resolve('./loaders/pitcher'),
 resourceQuery: query => {
  const parsed = qs.parse(query.slice(1))
  return parsed.vue != null
 },
 options: {
  cacheDirectory: vueLoaderUse.options.cacheDirectory,
  cacheIdentifier: vueLoaderUse.options.cacheIdentifier
 }
}
// 更新webpack的rules配置，這樣vue單文件中的各個標(biāo)簽可以應(yīng)用clonedRules相關(guān)的配置
compiler.options.module.rules = [
 pitcher,
 ...clonedRules,
 ...rules
]

// pitcher.js
module.exports = code => code
module.exports.pitch = function (remainingRequest) {
 if (query.type === `style`) {
  // 會查詢cssLoaderIndex并將其放在afterLoaders中
  // loader在execution階段是從后向前執(zhí)行的
  const request = genRequest([
   ...afterLoaders,
   stylePostLoaderPath, // 執(zhí)行l(wèi)ib/loaders/stylePostLoader.js
   ...beforeLoaders
  ])
  return `import mod from ${request}; export default mod; export * from ${request}`
 }
 // 處理模板
 if (query.type === `template`) {
  const preLoaders = loaders.filter(isPreLoader)
  const postLoaders = loaders.filter(isPostLoader)
  const request = genRequest([
   ...cacheLoader,
   ...postLoaders,
   templateLoaderPath + `??vue-loader-options`, // 執(zhí)行l(wèi)ib/loaders/templateLoader.js
   ...preLoaders
  ])
  return `export * from ${request}`
 }
 // ...
}

// vue-loader/lib/index.js 下面source為Vue代碼文件原始內(nèi)容

// 將單個*.vue文件內(nèi)容解析成一個descriptor對象，也稱為SFC（Single-File Components）對象
// descriptor包含template、script、style等標(biāo)簽的屬性和內(nèi)容，方便為每種標(biāo)簽做對應(yīng)處理
const descriptor = parse({
 source,
 compiler: options.compiler || loadTemplateCompiler(loaderContext),
 filename,
 sourceRoot,
 needMap: sourceMap
})

// 為單文件組件生成唯一哈希id
const id = hash(
 isProduction
 ? (shortFilePath + '\n' + source)
 : shortFilePath
)
// 如果某個style標(biāo)簽包含scoped屬性，則需要進(jìn)行CSS Scoped處理，這也是本章節(jié)需要研究的地方
const hasScoped = descriptor.styles.some(s => s.scoped)

if (descriptor.template) {
 const src = descriptor.template.src || resourcePath
 const idQuery = `&id=${id}`
 // 傳入文件id和scoped=true，在為組件的每個HTML標(biāo)簽傳入組件id時需要這兩個參數(shù)
 const scopedQuery = hasScoped ? `&scoped=true` : ``
 const attrsQuery = attrsToQuery(descriptor.template.attrs)
 const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${inheritQuery}`
 const request = templateRequest = stringifyRequest(src + query)
 // type=template的文件會傳給templateLoader處理
 templateImport = `import { render, staticRenderFns } from ${request}`
 
 // 比如，<template lang="pug"></template>標(biāo)簽
 // 將被解析成 import { render, staticRenderFns } from "./source.vue?vue&type=template&id=27e4e96e&lang=pug&"
}

let scriptImport = `var script = {}`
if (descriptor.script) {
 // vue-loader沒有對script做過多的處理
 // 比如vue文件中的<script></script>標(biāo)簽將被解析成
 // import script from "./source.vue?vue&type=script&lang=js&"
 // export * from "./source.vue?vue&type=script&lang=js&"
}

// 在genStylesCode中，會處理css scoped和css moudle
stylesCode = genStylesCode(
 loaderContext,
 descriptor.styles, 
 id,
 resourcePath,
 stringifyRequest,
 needsHotReload,
 isServer || isShadow // needs explicit injection?
)

// 由于一個vue文件里面可能存在多個style標(biāo)簽，對于每個標(biāo)簽，將調(diào)用genStyleRequest生成對應(yīng)文件的依賴
function genStyleRequest (style, i) {
 const src = style.src || resourcePath
 const attrsQuery = attrsToQuery(style.attrs, 'css')
 const inheritQuery = `&${loaderContext.resourceQuery.slice(1)}`
 const idQuery = style.scoped ? `&id=${id}` : ``
 // type=style將傳給stylePostLoader進(jìn)行處理
 const query = `?vue&type=style&index=${i}${idQuery}${attrsQuery}${inheritQuery}`
 return stringifyRequest(src + query)
}

// templateLoader.js
const { compileTemplate } = require('@vue/component-compiler-utils')

module.exports = function (source) {
 const { id } = query
 const options = loaderUtils.getOptions(loaderContext) || {}
 const compiler = options.compiler || require('vue-template-compiler')
 // 可以看見，scopre=true的template的文件會生成一個scopeId
 const compilerOptions = Object.assign({
  outputSourceRange: true
 }, options.compilerOptions, {
  scopeId: query.scoped ? `data-v-${id}` : null,
  comments: query.comments
 })
 // 合并compileTemplate最終參數(shù)，傳入compilerOptions和compiler
 const finalOptions = {source, filename: this.resourcePath, compiler,compilerOptions}
 const compiled = compileTemplate(finalOptions)
 
 const { code } = compiled

 // finish with ESM exports
 return code + `\nexport { render, staticRenderFns }`
}

function actuallyCompile(options) {
 const compile = optimizeSSR && compiler.ssrCompile ? compiler.ssrCompile : compiler.compile
 const { render, staticRenderFns, tips, errors } = compile(source, finalCompilerOptions);
 // ...
}

// elementToOpenTagSegments.js
// 對于單個標(biāo)簽的屬性，將拆分成一個segments
function elementToOpenTagSegments (el, state): Array<StringSegment> {
 applyModelTransform(el, state)
 let binding
 const segments = [{ type: RAW, value: `<${el.tag}` }]
 // ... 處理attrs、domProps、v-bind、style、等屬性
 
 // _scopedId
 if (state.options.scopeId) {
  segments.push({ type: RAW, value: ` ${state.options.scopeId}` })
 }
 segments.push({ type: RAW, value: `>` })
 return segments
}

[
  { type: RAW, value: '<div' },
  { type: RAW, value: 'class=demo' },
  { type: RAW, value: 'data-v-27e4e96e' }, // 傳入的scopeId
  { type: RAW, value: '>' },
]

const { compileStyle } = require('@vue/component-compiler-utils')
module.exports = function (source, inMap) {
 const query = qs.parse(this.resourceQuery.slice(1))
 const { code, map, errors } = compileStyle({
  source,
  filename: this.resourcePath,
  id: `data-v-${query.id}`, // 同一個單頁面組件中的style，與templateLoader中的scopeId保持一致
  map: inMap,
  scoped: !!query.scoped,
  trim: true
 })
 this.callback(null, code, map)
}

// @vue/component-compiler-utils/compileStyle.ts
import scopedPlugin from './stylePlugins/scoped'
function doCompileStyle(options) {
 const { filename, id, scoped = true, trim = true, preprocessLang, postcssOptions, postcssPlugins } = options;
 if (scoped) {
  plugins.push(scopedPlugin(id));
 }
 const postCSSOptions = Object.assign({}, postcssOptions, { to: filename, from: filename });
 // 省略了相關(guān)判斷
 let result = postcss(plugins).process(source, postCSSOptions);
}

export default postcss.plugin('add-id', (options: any) => (root: Root) => {
 const id: string = options
 const keyframes = Object.create(null)
 root.each(function rewriteSelector(node: any) {
  node.selector = selectorParser((selectors: any) => {
   selectors.each((selector: any) => {
    let node: any = null
    // 處理 '>>>' 、 '/deep/'、::v-deep、pseudo等特殊選擇器時，將不會執(zhí)行下面添加屬性選擇器的邏輯

    // 為當(dāng)前選擇器添加一個屬性選擇器[id]，id即為傳入的scopeId
    selector.insertAfter(
     node,
     selectorParser.attribute({
      attribute: id
     })
    )
   })
  }).processSync(node.selector)
 })
})