[Vue]vue-loader作用

⼀、vue⽂件

vue⽂件是⼀个⾃定义的⽂件类型，⽤类HTML语法描述⼀个vue组件，每个.vue组件包含三种类型的顶级语⾔快< template>< script>

This could be e.g. documentation for the component.

如果你喜欢分隔你的.vue⽂件到多个⽂件中，你可以通过src属性导⼊外部⽂件：

⼆、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将会使⽤标签名来查找对应的webpackloaders来应⽤到对应的模块上；webpack需要在vue-loader的选项loaders中指定；

vue-loader⽀持使⽤⾮默认语⾔，⽐如CSS预处理器，预编译的HTML模板语⾔，通过设置语⾔块的lang属性：