2019-02-28 webpack对于图片的处理过程分析

一张图片引发的一系列事件。。。
问题描述:
<img>标签需要动态引入图片，请求接口返回不同的图片名称展示不同的图片；

通过返回的图片名称直接动态引入 

js中定义图片路径;
  const data = './assets/1.jpg';
页面中引用：
    <img :src="data"/>

1. 图片路径变为： (http://localhost:8081/assets/avatar.jpg),找不到图片；
   路径应该为：(http://localhost:8081/static/img/avatar.jpg)才对；
2. npm run build 之后，该图片未被打包。

原因：webpack机制问题；
webpack会打包页面用到的图片，用不到的不被打包;
webpack中有一个包叫做url-loader，他可以将html以及css中的图片打包成base64或者图片本身，但是js中的图片路径，webpack并不能编译打包；

解决方案：
模块化引入：
图片通过模块化引入后，地址为打包后的绝对路径 /static/img/avatar.jpg;

<template>
  <div id="app">
    <img src="./assets/login-icon.png">

    <!-- 错误示范: 这种方式不能正确引用 -->
    <img :src="img">

    <!-- 正确示范: 模块化方式引用 -->
    <img :src="require(`./assets/${img2}`)">

    <!-- 正确示范: 模块化方式引用2 -->
    <img :src="img3">
    <router-view/>
  </div>
</template>

<script>
import loginIcon from './assets/login-icon.png';
export default {
  name: 'App',
  data() {
    return {
      img2: 'login-icon.png',
      img: './assets/avatar.jpg',
      img3: loginIcon,
    };
  },
}
</script>
注意：import只能引入静态资源，不能进行JS字符串的拼接,
require()可以通过拼接方式引入；

分析 webpack图片打包：

webpack中有两个对于图片处理的loader(file-loader、url-loader);

1. url-loader: 在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000, // 大小限制，如果低于10000byte,图片会自动转为base64
          name: utils.assetsPath('img/[name].[hash:7].[ext]') // 编译后图片名称(name: 图片名称；hash:7: 是图片内容的MD5的7位哈希值，ext: 图片后缀)
          fallback： ' responsive-loader ' ,
        }
      },

小图片转为base64后，页面不会发请求，这样可以节省加载时间；

官网：对于fallback：

• 类型String 默认：'file-loader'
• 指定当目标文件的大小超过limit选项中设置的限制时要使用的备用加载程序(默认file-uploader)。
• file-loader则默认使用该文件 并将所有查询参数传递给它。file-loader通过fallback选项启用使用替代方法 。