url-loader与file-loader的区别（webpack学习篇5）

我们知道图片文件的打包，可以通过file-loader来辅助完成，但项目开发中，可能会存在较多的图片，每个图片都会是一个http请求，为了优化性能，推荐一个新的辅助工具：url-loader
接下来说说url-loader相比于file-loader的优势：

使用file-loader打包图片

由于上篇文章（webpack学习篇4）中已经详细介绍了file-loader打包图片的方法，在这里就不介绍那么详细了，主要记录下使用file-loader工具打包后，生成文件的方式：（如下）

打包规则配置rules

webpack.config.js

module: {
  rules: [{
    test: /\.(jpg|png|jpeg)$/,
    use: {
      loader: 'file-loader',
      options: { // 配置参数
        // 这种配置语法叫做：占位符
        name: '[name]_[hash].[ext]', // 使用图片的名字，并使用图片的后缀
      }
    }
  }]
}

生成打包后文件的形式

打包后会生成单独的图片文件，存放在dist目录下，如下图：

但是，这种打包方式会存在一定的缺陷：打包之后，每个图片在加载时，都将会发送一个http请求，当页面图片过多，会严重拖慢网页加载速度。这种情况下，我们可以选择用url-loader进行打包，通过配置规则，让较小的图片打包成base64的形式存放在打包后的js中，不再需要单独发送http请求加载图片。具体操作步骤看下方。

使用url-loader打包图片文件

安装url-loader:

npm  install  url-loader  -D

配置打包规则

在webpack.config.js中配置：

// 在这里做打包配置
const path = require('path'); // 引入node的path模块（loader模块）
// Common.js语法
module.exports = {
  mode: 'development', // 默认模式为production，可不写，不写时打包运行命令行会有警告
  entry: {
    main: './src/index.js'
  },
  module: {
    rules: [{
      test: /\.(jpg|png|jpeg)$/,
      use: {
        loader: 'url-loader',
        options: { // 配置参数
          // 这种配置语法叫做：占位符
          name: '[name]_[hash].[ext]', // 使用图片的名字，并使用图片的后缀
          limit: 40960
        }
      }
    }]
  },
  output: {
    filename: 'dist.js', // 打包之后的输出文件
    path: path.resolve(__dirname, 'dist') 
  }
}

在配置规则中添加 “limit” 配置参数，当图片超过40960（40kb）个字节，就会像file-loader一样把打包文件单独生成一个图片文件，当图片小于40kb时，就会把图片打包成base64的字符串，存放到打包后的dist.js文件里。

生成打包后文件的形式

dist文件目录已不再出现单独的图片文件，如下：

打包后的dist.js文件如下：

浏览器查看效果如下：

注： 要求被编码的图片要特别小，否则编码字节长度过长，即使压缩后也得不偿失，一般适合在几kb。上边例子中的图片大小为26kb，为了演示效果，才把limit的值设置到了40kb，在真实项目开发中，一般不会设置这么大的值，大家要视情况而定。也会有一些特例，如：如果是loading等一些使用太频繁的组件化图片，哪怕20k一般也会转成base64。一是便于UI组件的维护，二是使用时不用每次都发送请求。

所以总结如下：url-loader它除了做file-loader能做的事情，还能做除file-loader以外的事情。url-loader与file-loader的主要区别：url-loader会通过配置规则将一定范围大小的图片打包成base64的字符串，放到dist.js文件里，而不是单独生成一个图片文件。而file-loader在打包时一定会生成单独的图片文件。