file-loade

前面说到打包图片文件需要使用file-loader，但是打包后的图片名是一串hash值而不是之前的文件名。

这时候就需要我们来配置一些参数：
https://v4.webpack.docschina.org/loaders/file-loader/#name

module.exports = {
  // ...
  // 当你打包一个模块的时候就到这里查询相应的规则
  module: {
    rules: [{
      test: /\.jpg$/,
      use: {
        loader: "file-loader",
        options: {
          // name 标识当前的文件名，ext 表示当前的文件拓展名
          name: "[name].[ext]"
        }
      }
    }]
  }
  // ...
}

另外我们还可以配置将打包后的图片单独存放到一个文件夹：
https://www.webpackjs.com/loaders/file-loader/#outputpath

module.exports = {
  // ... 
  // 当你打包一个模块的时候就到这里查询相应的规则
  module: {
    rules: [{
      test: /\.jpg$/,
      use: {
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          // publicPath 文件打包后的存放位置
          publicPath: "images/"
        }
      }
    }]
  }
  // ...
}

url-loader

类似的还有url-loader，但是在文件大小（单位byte）低于指定的限制时，可以返回一个 DataURL：
https://webpack.docschina.org/loaders/url-loader/
安装：

$ npm install url-loader --save-dev

配置：

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.jpg$/,
      use: {
        loader: "url-loader",
      }
    }]
  }
  // ...
}

url-loader将图片转换为Base64的字符串，直接放到img标签的src属性中，而不是单独生成图片文件（简单说就是不会打包到dist文件夹中）。

这样做的好处就是：图片转换为JS代码，减少了一次http的请求。
但是还有个问题，如果这个图片特别的大，你的JS文件就会特别的大，你的JS加载时间就会变长。

如何解决呢？如果一个图片非常小我们就可以将它处理成Base64，相反图片非常大的话就输出到目录中。

module.exports = {
  // ...
  use: {
    loader: "url-loader",
    options: {
      name:"[name]_[hash].[exe]",
      // 如果大于就输出到目录
      publicPath: "images/",
      // 如果图片小于2048（2kb）字节的话就处理成 base64 的字符串
      limit: 2048,
    }
  }
  // ...
}