vue由webpack编译还是babel编译

Question

大佬们好，小弟最近在看babel和webpack时有一点不明白，vue到底由webpack编译还是babel编译呢？

vue的官网说 .vue 单文件将会被webpack中的vue-loader编译，但是在我的理解中webpack只是一个应用打包工具。
将.vue文件编译成浏览器认识html这一步到底由babel来做还是loader呢？
我将搜到的文章和我的知识结合得到的结论：

vue将代码抽象成虚拟DOM树 => 由webpack中的vue-loader编译成js文件 => 再由babel将js文件转换为浏览器可识别的代码（比如兼容ES6） => 最终再交还给webpack打包成一个app.js

不知道小弟分析的对不对，如有不对还请大佬们指出来。万分感谢！

Answer 1

除了第一个，后面你的理解是对的

1. dom => vdom 那是vue运行时的操作，跟webpack没关系
2. webpack是个打包工具或也可以说是平台，因为提供了api可以让各个插件在基于他的基础上执行对文件预编译等的操作，babel就是其中之一，利用webpack server hot在每次起服务执行脚本的时候，可以让babel等插件预编译脚本 es6 => es5 再让浏览器识别，打包也亦是如此
3. vue-loader是什么？es5-babel只能看懂js语法，并看不懂vue、ng、react等语法，或以后自己写各种a、b、c、d框架，babel都看不懂，这时候需要vue-loader把 vue => js 如果 vue => babel 那babel肯定看不懂

Answer 2

vue将代码抽象成虚拟DOM树 在最后

Answer 3

由webpack中的vue-loader将vue编译成js文件 => 再由babel将ES6文件转换ES5 => webpack打包 => 浏览器运行（vue将代码抽象成虚拟DOM树）