Open dave-wind opened 1 year ago
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版本 是不包含复杂的编译过程的
Vue-loader 原理