vue-loader 是一个加载器，能把Vue 组件转化成JavaScript模块。vue-loader 提供了一些非常酷炫的特性：

• ES2015默认可用；
• 在每个 Vue 组件内支持其他的 webpack 加载器，如用于<style>的 SASS 和用于<template> 的 Jade。
• 把<style> 和 <template> 内引用的静态资源作为模块依赖项对待，并用Webpack 加载器处理。 
  
• 对每个组件模拟有作用域的css。
• 开发阶段支持组件的热加载。
  简单来说，webpack 和 vue-loader 的组合为你创作Vue应用的一个更先进、更灵巧的极其强大的前端开发模式。

Vue 组件

*.vue 文件是用户用 html-like 的语法编写的 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>

vue-loader 解析文件，提取每个语言块，让他们通过需要的其他 loaders ，最后组装起来，放回 CommonJS 的模块，此模块的 module.exports 就是个 Vue.js 组件对象。vue-loader 默认用没有用语言编译器，想CSS 预编译和HTML模板编译语言等，如果想用这些功能，需要设置 lang 属性的来实现。例如，你可以在组件的样式中这样用 SASS ：

<style lang="sass">
  /* 编写 SASS! */
</style>

链接: https://fly63.com/nav/2742