Vue Loader

https://vue-loader.vuejs.org/zh/

Vue Loader 是什麼？

Vue Loader 是一個 webpack 的 loader，它允許你以一種名為單文件組件 SFC的格式撰寫 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 loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
• 允許在一個 .vue 文件中使用自定義塊，並對其運用自定義的 loader 鏈；
• 使用 webpack loader 將 <style> 和 <template> 中引用的資源當作模塊依賴來處理；
• 為每個組件模擬出 scoped CSS；
• 在開發過程中使用熱重載來保持狀態。

簡而言之，webpack 和 Vue Loader 的結合為你提供了一個現代、靈活且極其強大的前端工作流，來幫助撰寫 Vue.js 應用。

如果你不想手動設置 webpack，我們推薦使用 Vue CLI 直接創建一個項目的腳手架。通過 Vue CLI 創建的項目會針對多數常見的開發需求進行預先配置，做到開箱即用。

處理資源路徑

當 Vue Loader 編譯單文件組件中的 <template> 塊時，它也會將所有遇到的資源 URL 轉換為 webpack 模塊請求。

<img src="../image.png">

https://github.com/webpack-contrib/css-loader

轉換規則

資源 URL 轉換會遵循如下規則：

• 如果路徑是絕對路徑 (例如 /images/foo.png)，會原樣保留。
• 如果路徑以 . 開頭，將會被看作相對的模塊依賴，並按照你的本地文件系統上的目錄結構進行解析。
• 如果路徑以 ~ 開頭，其後的部分將會被看作模塊依賴。這意味着你可以用該特性來引用一個 Node 依賴中的資源：

<img src="~some-npm-package/foo.png">

• 如果路徑以 @ 開頭，也會被看作模塊依賴。如果你的 webpack 配置中給 @ 配置了 alias，這就很有用了。所有 vue-cli 創建的項目都默認配置了將 @ 指向 /src

轉換資源 URL 的好處是：

• file-loader 可以指定要複製和放置資源文件的位置，以及如何使用版本哈希命名以獲得更好的緩存。此外，這意味着 你可以就近管理圖片文件，可以使用相對路徑而不用擔心部署時 URL 的問題。使用正確的配置，webpack 將會在打包輸出中自動重寫文件路徑為正確的 URL。
• url-loader 允許你有條件地將文件轉換為內聯的 base-64 URL (當文件小於給定的閾值)，這會減少小文件的 HTTP 請求數。如果文件大於該閾值，會自動的交給 file-loader 處理。

@ 別名在 .vue <style> 裏無法加載圖片的問題

https://github.com/vuejs/vue-loader/issues/1113

Scoped CSS

當 <style> 標籤有 scoped 屬性時，它的 CSS 只作用於當前組件中的元素。

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

<template>
  <div class="example">hi</div>
</template>

轉換結果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

你可以在一個組件中同時使用有 scoped 和非 scoped 樣式：

<style>
/* 全局樣式 */
</style>

<style scoped>
/* 本地樣式 */
</style>

深度作用選擇器

如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代碼將會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }

還有一些要留意

Scoped 樣式不能代替 class。考慮到瀏覽器渲染各種 CSS 選擇器的方式，當 p { color: red } 是 scoped 時 (即與特性選擇器組合使用時) 會慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影響就會消除。

熱重載

當使用腳手架工具 vue-cli 時，熱重載是開箱即用的。

狀態保留規則

• 當編輯一個組件的 <template> 時，這個組件實例將就地重新渲染，並保留當前所有的私有狀態。能夠做到這一點是因為模板被編譯成了新的無副作用的渲染函數。
• 當編輯一個組件的 <script> 時，這個組件實例將就地銷燬並重新創建。(應用中其它組件的狀態將會被保留) 是因為 <script> 可能包含帶有副作用的生命週期鈎子，所以將重新渲染替換為重新加載是必須的，這樣做可以確保組件行為的一致性。這也意味着，如果你的組件帶有全局副作用，則整個頁面將會被重新加載。
• <style> 會通過 vue-style-loader 自行熱重載，所以它不會影響應用的狀態。

代碼校驗 (Linting)

ESLint

stylelint https://stylelint.io/

Vue 單文件組件 (SFC) 規範
vue-loader 會解析文件，提取每個語言塊，如有必要會通過其它 loader 處理，最後將他們組裝成一個 ES Module，它的默認導出是一個 Vue.js 組件選項的對象。

選項參考

https://vue-loader.vuejs.org/zh/options.html#選項參考

選項參考這個我們下次再聊～