理解vue-loader

事情的起源是被人问到，一个以.vue结尾的文件，是如何被编译然后运行在浏览器中的？突然发现，对这一块模糊的很，而且看mpvue的文档，甚至小程序之类的都是实现了自己的loader，所以十分必要抽时间去仔细读一读源码，顺便总结一番。

首先说结论：

    一、vue-loader是什么

    

    简单的说，他就是基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取，划重点。

    至于什么是webpack的loader，其实就是用来打包、转译js或者css文件，简单的说就是把你写的代码转换成浏览器能识别的，还有一些打包、压缩的功能等。

    这是一个.vue单文件的demo   

vue文件式例  折叠源码

</code> </div> <div class="line number6 index5 alt1"> <code class="js plain">export </code> <code class="js keyword">default</code>  <code class="js plain">{</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">  </code> <code class="js plain">data () {</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">    </code> <code class="js keyword">return</code>  <code class="js plain">{</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces">      </code> <code class="js plain">msg: </code> <code class="js string">'Hello world!'</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces">  </code> <code class="js plain">}</code> </div> <div class="line number12 index11 alt1"> <code class="js plain">}</code> </div> <div class="line number13 index12 alt2"> <code class="js plain">

</code> </div> <div class="line number16 index15 alt1"> <code class="js plain">.example {</code> </div> <div class="line number17 index16 alt2"> <code class="js spaces">  </code> <code class="js plain">color: red;</code> </div> <div class="line number18 index17 alt1"> <code class="js plain">}</code> </div> <div class="line number19 index18 alt2"> <code class="js plain">

二、 vue-loader 的作用（引用自官网）

• 允许为 Vue 组件的每个部分使用其它的 webpack loader，例如在