目录

• 资源加载
  • 1.1 处理 img.src 这样的资源属性
  • 1.2 在内样式中 background-image 如何加载
  • 1.3 在样式块中 background-image 如何加载
• 2 与资源加载有关的两个加载器
  • 2.1 url-loader
  • 2.2 file-loader
• 3 关于如何选择优先在哪里配置的问题
• 源码

1 资源加载

1.1 处理 img.src 这样的资源属性

当 Vue Loader 编译单文件组件中的 <template> 块时，它也会将所有遇到的资源 URL 转换为 webpack 模块请求。

例如，下面的模板代码片段：

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

将会被编译成为：

createElement('img', {
  attrs: {
    src: require('../image.png') 
})

require('../image.png') 这是一个模块的请求了。

除了 img.src 还有哪些标签的属性，会自动转为模块请求，这是由 Vue Loader 模块的 transformAssetUrls 定义的。

transformAssetUrls 默认值为：

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

由于有编译时模块的自动转换，所以下面三行代码的组件效果是一致的：

<img src="../assets/logo.svg"/>
<img src="@/assets/logo.svg"/>
<img :src="require('../assets/logo.svg')"/>

第二行可以 @ 符号，因为 vue.config.js 有关于别名的配置， @ 相当于 src 。

运行效果：

1.2 在内样式中 background-image 如何加载

在 style 内联样式中直接引用资源是不行的：

<div style="background-image:url('@/assets/logo.svg')"></div>

url 是 css 语法， background-image 属性也不在 vue-loader 插件的自动转换匹配之列。

有人是写一个 data 变量，但如果这个变量仅是此处使用一次，声明反而迂腐了。可以直接使用 require 关键字实现：

<div :style="{backgroundImage:'url('+require('@/assets/logo.svg')+')'}"></div>

1.3 在样式块中 background-image 如何加载

这是在 template 中的方法，因为可以直接使用 require 关键字，如果是在样式文件或在 style 代码块内呢，此时 require 关键字不得使用？

如果这样使用：

<style lang="less" scoped>
.button1{
  background-image:url('@/assets/logo.svg')
</style>

是不行的，程序会报编译错误。但如果这样使用：

.button1{
  background-image:url('~@/assets/logo.svg');
}

就可以了。仅在路径前端加一个 ~ 符号。在 style block 内可以使用，在独立的 style file 中相信也可以使用。

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

1，如果路径以 @ 开头，会被看作模块依赖，将启用插件加载资源。这时候在 webpack 配置中给 @ 配置 alias ，就很有用了。

2，如果路径以 ~ 开头，其后的部分将会被看作模块依赖。

3，如果路径以 . 开头，将会被看作相对的模块依赖。

4，如果路径是绝对路径，例如 /images/foo.png ，会原样保留。

2 与资源加载有关的两个加载器

file-loader 用于实现文件加载， url-loader 用于实现 data url 与 url 路径的转换控制。

2.1 url-loader

url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.

如果图片大小小于某值，直接以 data url 形式内嵌于 html 标签内。在 vue.config.js 文件中的样例配置为：

configureWebpack: {
    module:{
      rules:[
          test: /\.(png|jpg|gif)$/i,
          use: [
              loader: 'url-loader',
              options: {
                limit: 8192,
  },

如果不想使用 data url 这种形式，可以将值改小。

2.2 file-loader

该插件让 import、require 发挥作用。在 vue.config.js 文件中的典型配置为：

configureWebpack: {
    module:{
      rules:[
            test: /\.(png|jpe?g|gif)$/i,
            use: [
                loader: 'file-loader',