[Vue]vue-loader做用

1、vue文件

vue文件是一個自定義的文件類型，用類HTML語法描述一個vue組件，每一個.vue組件包含三種類型的頂級語言快< template>< script>< style>，還容許添加自定義的模塊；

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

<custom1>
  This could be e.g. documentation for the component.
</custom1>

若是你喜歡分隔你的.vue文件到多個文件中，你能夠經過src屬性導入外部文件：

<template src='./template.html'></template>
<style src='./style.css'></style>
<script src='./script.js'></script>

 

2、vue-loader

vue-loader會解析文件，提取出每一個語言塊，若是有必要會經過其餘loader處理，最後將他們組裝成一個commonjs模塊；module.exports出一個vue.js組件對象； 

1：< temlate>語言塊 
（1）默認語言：html 
（2）每一個.vue文件最多包含一個< template>塊 
（3）內容將被提取爲字符串，將編譯用做VUE組件的template選項； 
2：< script> 
（1）默認語言：JS（在監測到babel-loader或者buble-loader配置時，自動支持ES2015） 
（2）每一個.vue文件最多包含一個< script>塊 
（3）該腳本在類CommonJS環境中執行（就像經過webpack打包的正常JS模塊）。因此你能夠require()其餘依賴。在ES2015支持下，也可使用import跟export語法 
（4）腳本必須導出Vue.js組件對象，也能夠導出由VUE.extend()建立的擴展對象；可是普通對象是更好的選擇； 
3：< style> 
（1）默認語言：css 
（2）一個.vue文件能夠包含多個< style>標籤 
（3）這個標籤能夠有 scoped 或者 module屬性來幫助你講樣式封裝到當前組件；具備不一樣封裝模式的多個< style>標籤能夠在同一個組件中混合使用 
（4）默認狀況下，可使用style-loader提取內容，而且經過< style>標籤動態假如文檔的< head>中，也能夠配置webpack將全部的styles提取到單個CSS文件中； 
4：自定義塊 
能夠在.vue文件中添加額外的自定義塊來實現項目的特殊需求；例如< docs>塊；vue-loader將會使用標籤名來查找對應的webpack loaders來應用到對應的模塊上；webpack須要在vue-loader的選項loaders中指定； 

vue-loader支持使用非默認語言，好比CSS預處理器，預編譯的HTML模板語言，經過設置語言塊的lang屬性：

<style lang='sass'>
    /*sass*/
</style>