高级前端webpack【Q091】vue-loader 的实现原理是什么

vue-loader 的实现原理是什么

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 92

Author 回答者: hwb2017

vue-loader会把sfc中的内容拆分为template,script,style三个“虚拟模块”,然后分别匹配webpack配置中对应的rules,比如script模块会匹配所有跟处理JavaScript或TypeScript相关的loader。

template中的内容会通过 vue compiler 转换为 render函数后合并到 script “虚拟模块”中。

scoped style 会经过vue-loader/style-post-loader的处理,成为只匹配特定元素的私有样式。

参考 vue-loader README