qappleh
commented
4 years ago 什么是vue-loader
vue-loader是用于webpack的加载器，允许你用叫做Single-File Components单文件组件的格式来写Vue组件
<template> <div class="example">{{ msg }}</div></template>
<script>export default { data () { return { msg: 'Hello world!' } }}</script>
<style>.example { color: red;}</style>这里有vue-loader提供许多炫酷的功能
- 允许Vue组件的每个部分使用其它的webpack加载器，比如Sass加载
注册VueLoaderPlugin 在插件中，会复制当前项目webpack配置中的rules项，当资源路径包含query.lang时通过resourceQuery匹配相同的rules并执行对应loader时 插入一个公共的loader，并在pitch阶段根据query.type插入对应的自定义loader 加载*.vue时会调用vue-loader,.vue文件被解析成一个descriptor对象，包含template、script、styles等属性对应各个标签， 对于每个标签，会根据标签属性拼接src?vue&query引用代码，其中src为单页面组件路径，query为一些特性的参数，比较重要的有lang、type和scoped 如果包含lang属性，会匹配与该后缀相同的rules并应用对应的loaders 根据type执行对应的自定义loader，template将执行templateLoader、style将执行stylePostLoader 在templateLoader中，会通过vue-template-compiler将template转换为render函数，在此过程中， 会将传入的scopeId追加到每个标签的上，最后作为vnode的配置属性传递给createElemenet方法， 在render函数调用并渲染页面时，会将scopeId属性作为原始属性渲染到页面上 在stylePostLoader中，通过PostCSS解析style标签内容