vue-loader是一个webpack的loader；可以将vue文件转换为JS模块；
（1）ES2015默认支持 （2）允许对VUE组件的组成部分使用其他webpack loader;比如对< style >使用SASS（编译CSS语言），对< template >使用JADE（jade是一个高性能的模板引擎，用JS实现，也有其他语言的实现—php,scala,yuby,python,java，可以供给node使用） （3）.vue文件中允许自定义节点，然后使用自定义的loader处理他们 （4）对< style >< template >中的静态资源当做模块来对待，并且使用webpack loaders进行处理 （5）对每个组件模拟出CSS作用域 （6）支持开发期组件的热重载 在编写vue应用程序时，组合使用webpack跟vue-loader能带来一个现代。灵活并且非常强大的前端工作流程；
（1）webpack是一个模块打包工具，他可以将一堆文件中的每个文件都作为一个模块；找出他们的依赖关系，将他们打包为可部署的静态资源； （2）使用webpack的loaders，我们可以配置webpack以任何方式去转换所有类型的文件；例如 A：转换ES2015，CoffeeScript或者TypeScript模块为普通的ES5 CommonJs模块； B：可以选择在编译之前检验你的源代码； C：将jade模板转换为纯HTML并且嵌入JS字符串中 D：将SASS文件转换为纯CSS，然后将其转换成JS片段，将生成的CSS作为< style >标签插入页面； E：处理html或者CSS中引用的图片。移动到配置的路径中，并且使用MD5 hash重命名； （3）当你理解webpack原理后会感觉到它是这么强大，可以大大的优化你的前端工作流程；缺点是配置比较复杂；
.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-loader会解析文件，提取出每个语言块，如果有必要会通过其他loader处理，最后将他们组装成一个commonjs模块；module.exports出一个vue.js组件对象； vue-loader支持使用非默认语言，比如CSS预处理器，预编译的HTML模板语言，通过设置语言块的lang属性；例如
<style lang='sass'> /*sass*/ </style>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中指定； 以上4个模块的导入方式 如果你喜欢分隔你的.vue文件到多个文件中，你可以通过src属性导入外部文件；
<template src='./template.html'></template> <style src='./style.css'></style> <script src='./script.js'></script>1：当项目中配置了babel-loader或者buble-loader，vue-loader会使用它们处理所有.vue文件中的< script>部分，允许我们在VUE组件中使用ES2015；如果你还没有使用ES2015，你应该使用它；
<template> <Component-a><Component-a> <Component-b><Component-b> <template> <script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { components: { ComponentA, ComponentB } } </script>2：在 Templates 中使用 ES2015
<li v-for="{ id, text } in items"> {{ id }} {{ text }} </li> <my-component> <template scope="{ id, text }"> <span>{{ id }} {{ text }}</span> </template> </my-component>3：vue-loader只处理.vue文件，你需要告诉webpack如何使用babel-loader或者buble-loader处理.js文件，在webpack中配置babel-loader或者buble-loader；脚手架vue-cli已经为你做了这些；
当
<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跟non-scoped styles
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>CSS 作用域不能代替 classes。考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，p { color: red } 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 classes 或者 ids 代替，比如 .example { color: red }，这样几乎没有性能影响。
在< style>上添加module属性，将为css-loader打开CSS模块模式；生成的CSS对象将为组件注入一个名叫$style的计算属性，可以在模块中使用动态的class绑定；由于他是一个计算属性，它也适用于:class的object/array语法
<template> <p :class="$style.red"> This should be red </p> </template> <template> <div> <p :class="{ [$style.red]: isRed }"> Am I red? </p> <p :class="[$style.red, $style.bold]"> Red and bold </p> </div> </template> <style module> .red { color: red; } .bold { font-weight: bold; } </style> <script> export default { created () { console.log(this.$style.red) } } </script>自定义注入名称
<style module="a"> </style> <style module="b"> </style>配置 css-loader Query
CSS 模块处理是通过 css-loader。默认 query 如下：
{ modules: true, importLoaders: true, localIdentName: '[hash:base64]' }你可以使用 vue-loader 的 cssModules 选项去为 css-loader 添加 query 配置：
// webpack 2 module: { rules: [ { test: '\.vue$', loader: 'vue-loader', options: { cssModules: { localIdentName: '[path][name]---[local]---[hash:base64:5]', camelCase: true } } } ] }vue-loader处理的CSS输出，都是通过PostCSS进行作用域重写，还可以为PostCSS添加自定义插件，
module.exports = { // other options... module: { // module.rules is the same as module.loaders in 1.x rules: [ { test: /\.vue$/, loader: 'vue-loader', // vue-loader options goes here options: { // ... postcss: [require('postcss-cssnext')()] } } ] } }1：CSS
npm install sass-loader node-sass --save-dev <style lang="sass"> /* write sass here */ </style>与名称相反，sass-loader 默认解析 SCSS 语法。如果你想要使用 SASS 语法，你需要配置 vue-loader 的选项：
{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss"> sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass"> } } }2：JS Vue 组件中的所有 JavaScript 默认使用 babel-loader 处理。你也可以改变处理方式：
npm install coffee-loader --save-dev <script lang="coffee"> # Write coffeescript! </script>3：template 模版的处理方式略有不同，因为大多数 Webpack 模版处理器（比如 pug-loader）会返回模版处理函数，而不是编译的 HTML 字符串，我们使用原始的 pug 替代 pug-loader:
npm install pug --save-dev <template lang="pug"> div h1 Hello world! </template>重要: 如果你使用 vue-loader@<8.2.0， 你还需要安装 template-html-loader。
默认情况下，vue-loader 使用 css-loader 和 Vue 模版编译器自动处理你的样式和模版文件。在编译过程中，所有的资源路径例如 , background: url(…) 和 @import 会作为模块依赖。
例如，url(./image.png) 会被转换为 require(‘./image.png’) 因为 .png 不是一个 JavaScript 文件，你需要配置 Webpack 使用 file-loader 或者 url-loader 去处理它们。vue-cli 脚手器工具已经为你配置好了
使用它们的好处： （1）file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理你的图片文件，可以使用相对路径而不用担心布署时URL问题。使用正确的配置，Webpack 将会在打包输出中自动重写文件路径为正确的URL。
（2）url-loader 允许你有条件将文件转换为内联的 base-64 URL（当文件小于给定的阈值），这会减少小文件的 HTTP 请求。如果文件大于该阈值，会自动的交给 file-loader 处理。
