## 一、概述 Vue Loader 是一個 webpack 的 loader，它允許你以一種名為單文件組件 (SFCs)的格式撰寫 Vue 組件； ```html <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 應用。