vue-loader（一）

1.git clone github.com/vuejs/vue-l…

2.从example开始看

example文件夹下我们可以看到基本的vue-loader的配置

const VueLoaderPlugin = require('../lib/plugin')
module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      ]},
  plugins: [
    new VueLoaderPlugin()
  ]
}

最终一个vue SFC会被拆分（select.js）成template（template-compiler解析）/style（style-compiler解析）/script（babel-loader），还有可能会有自定义的几个block，每个块再有对应的loader进行处理。我简单的把它理解为.vue文件的入口处理器。

3.VueLoaderPlugin实现

VueLoaderPlugin根据webpack的版本提供了两种实现plugin-webpack4和plugin-webpack5.我选择的webpack4。

apply (compiler) {
    //增加了一个检测插件缺失的标志，与流程关系不大故去除
    ...
    const rawRules = compiler.options.module.rules
    const { rules } = new RuleSet(rawRules)

    // 有没有给.vue配置rules（webpack中）
    let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`))
    if (vueRuleIndex < 0) {
      vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
    }
    const vueRule = rules[vueRuleIndex]
    ...
    tips: 这一段有代码，注释的意思是vue-loader的option要给其他loader引用，我不太明白这一段的意思。

    // 下面就是要创建pitcher 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
      }
    }

    // 扩展rules
    compiler.options.module.rules = [
      pitcher,
      ...clonedRules,
      ...rules
    ]
  }
  }

4.vue-loader的实现明天继续