在前边的文章介绍过webpack如何将.css文件的代码插入到html页面(style-loader、css-loader)、将散落在项目各地的css代码合并到一个index.css文件里进行统一管理(extract-text-webpack-plugin)、对.vue文件进行编译(vue-loader、vue-style-loader、babel等)。除了这些功能之外，webpack还支持对图片、字体等文件的处理，本节介绍url-loader和file-loader的简单配置。

1. 安装依赖：

npm install --save-dev url-loader
npm install --save-dev file-loader

2. 修改webpack.config.js，代码如下：

//部分代码省略
module: {
    rules: [{
        test: /\.(gif|png|jpg|jpeg|woff|svg|ttf)\??.*$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 102400
            }
        }]
    }]
}

这个配置的含义是：当webpack编译以.gif、.png、.jpg、.jpeg、.woff、.svg、.ttf结尾的文件时，使用"url-loader"加载，limit: 102400表示当文件体积小于100kb时，使用base64的形式加载，不会生成一个文件。

3. 在根目录中新建文件夹img，移入一个100kb以内的图片命名为test.jpg，在app.vue中引用，代码如下：

<template>
    <div>
        <p>app.vue img</p>
        <img src="./img/test.jpg" class="img" />
        <vTitle></vTitle>
        <vCount v-model="count"></vCount>
        <p>app.vue count {{count}}</p>
    </div>
</template>
# js代码不变
# css代码省略

4. 启动项目，看到如下效果：

image.png

可以看到，图片正常加载，并以base64形式加载。

5. 其他加载方式

图片除了使用<img/>的src属性直接引用文件以外，还可以使用import方式加载。在title.vue中使用该方法加载，修改代码：

<template>
    <nav>
        <ul class="nav">
            <li
                v-for="(item, idx) in navs"
                :key="idx"
                :value="item.value"
                :class="{'active': idx === 0}"
            >
                <a href="javascript:void(0);">{{item.text}}</a>
            </li>
        </ul>
        <p>title.vue img</p>
        <img :src="img" alt="" srcset=""> 
    </nav>
</template>

<script>
//引入图片
import img from '../img/test.jpg'
export default {
  data() {
    return {
      navs: [
          {
              text: '新闻',
              vaule: 'news'
          },
          {
              text: '视频',
              vaule: 'videos'
          },
          {
              text: '生活',
              vaule: 'life'
          }
      ],
      //声明img
      img
    };
  },
}
# css代码省略
</script>

效果如下：

image.png

6. 踩坑

app.vue和title.vue中引入图片的路径都是相对路径，最终图片都以base64方式展示，如果使用绝对路径会成功吗？
再次修改title.vue，代码如下：

<template>
   <nav>
       <ul class="nav">
           <li
               v-for="(item, idx) in navs"
               :key="idx"
               :value="item.value"
               :class="{'active': idx === 0}"
           >
               <a href="javascript:void(0);">{{item.text}}</a>
           </li>
       </ul>
       <p>title.vue img</p>
       <img :src="img" alt="" srcset="">
       <div style="padding: 10px 50px">
           <p>img标签绝对路径</p>
           <img src="/img/test.jpg" />
           <p>import 绝对路径</p>
           <img :src="absSrc" />
       </div>
   </nav>
</template>

<script>
//引入图片
import img from '../img/test.jpg'
import absSrc from '@/test.jpg'
export default {
 data() {
   return {
     navs: [
         {
             text: '新闻',
             vaule: 'news'
         },
         {
             text: '视频',
             vaule: 'videos'
         },
         {
             text: '生活',
             vaule: 'life'
         }
     ],
     //声明img
     img,
     absSrc
   };
 },
}
</script>
#css代码省略

我们注意到这样一行代码：

import absSrc from '@/test.jpg'

这个是使用到了webpack的解析Resolve----使用"@"作为img文件夹的别名，这里我们需要给webpack.config.js加一个resolve参数：

var config = {
    //部分代码省略
    plugins: [
        new ExtractTextPlugin('index.css')
    ],
    resolve: {
        alias: {
            '@': require('path').resolve(__dirname, 'img') 
        }
    }
}

由于修改了配置文件，需要重新启动项目，效果如下：

image.png

7. 总结

• 使用url-loader、file-loader可以对图片、字体文件进行转换。
• url-loader在使用时可以配置相应的选项，如limit等，具体信息参考npm url-loader.
• url-loader最终的目的是为了将图片以base64方式加载，引入的方式可以使用<img/>、import两种方式，但是<img/>的src属性直接引入的绝对路径则无法通过base64方式展示，即：

import img from "../img/test.jpg"
import absSrc from "@/test.jpg"

• 使用"@"作为文件夹img的别名，需要配置webpack的解析Resolve属性。

完整代码github地址：https://github.com/zhiyuanMain/zhihu-daily