vue-loader 浅析原理

Vue-loader 原理

简单来说,就是解析.vue文件,把里面 template  script style 三大模块 内容解析出来 变成 新的引用路径 给对应的loader处理, 
eg:

import style0 from "./App.vue 转变为
import style0 from "./App.vue?vue&type=style&index=0&lang=less&

type =style 会在loader内部做 pitch处理, 简单表达一下 loader执行顺序如下图:

eg:
{
test: /\.less$/,
use: ['style-loader','css-loader','less-loader'] // 这里就是多个loader
}

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
其实loader 数组 表面看是 从右到左执行,实际上如上图 要先 执行pitch 如果有返回值 就return 不执行后面的loader, 所以vue-loader 做了很多特殊处理,它会解析 resoucequery 去特殊处理,
一.js 是默认处理(?vue&type=js)
分别最后交给了 vue-loader babel-loader cache-loader 默认第一个永远是vue-loader 呀
二.一般style 处理 就正常的处理 经过 vue-loader ,然后css预编译 less||scss , potcss-loader 预处理, css-loader 最后 vue-style-loader 内敛到项目里
三. template处理(?vue&type=template):
vue-loader babel-loader cache-loader
其中 vue-loader 最重要, 里面实际上调用了 vue-template-compiler,该调用 也可以用户自行传入:
const compiler = options.compiler || require('vue-template-compiler')
⚠️注意:
vue-template-compiler 可以 把html 循环遍历 -> ast 语法树 -> 生成render 函数
而一般用的 vue.js  是full 版本, 包含了 runtime + compiler , 用户可以使用 template 语法传入模版,一般用户开发环境 或者 umd包 生产环境,  runtime版本 是不包含复杂的编译过程的

dave-wind / blog

vue-loader 浅析原理 #5