vue-loader

Vue-loader是一个webpack的loader，它允许你一种名为单文件组件的格式撰写Vue组件；当Vue loader编译单文件组件中的<template>块时，它也会将所有遇到的

资源URL转换为webpack 模块请求。

例如：

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

将会被编译成为：

createElement('img',{attrs:{src:require('../image.png')}});//现在这时一个模块的请求了

默认下列标签/特性的组合会被转换，且这些组合时可以使用transformAssetUrls选项进行配置的。

{

video:['src','poster'],

source:'src',

img:'src',

image:['xlink:href','href'],

use:['xlink:href','href']

}

如果你配置了为<style>块使用css-loader,则你的css中的资源URL也会被同等处理

转换规则：

资源URL转换会遵循如下规则：

1 如果路径时绝对路径，(/image/foo.png),会原样保留。

2 如果路径以 . 开口，将会被看作相对的模块依赖，并按照你的本地文件系统上的目录结构进行解析。

3 如果路径以@开头，也会被看作模块依赖。如果你的webpack配置中给@配置了alias,这就很有用了。所有vue-cli创建的项目默认配置了将@指向/src

4 如果路径时以~ 开头，其后的部分将会被看作模块依赖，这以为着你可以用该特性来引用一个node依赖中的资源：

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

注意:有时当你明明配置过一个alias时，然后使用时却无效，这时你就要把~加上了，例如:

alias:{'style':resolve('static/style')}

<style lang="scss" scoped>

@import '~style/mixin.scss'

</style>