webpack之file-loader和url-loader的区别

前言

webpack加载css背景图片、img元素指向的网络图片、使用es6的import引入的图片时，需要使用url-loader或者file-loader。
url-loader和file-loader可以加载任何文件。

区别

url-loader可以将图片转为base64字符串，能更快的加载图片，一旦图片过大，
就需要使用file-loader的加载本地图片，故url-loader可以设置图片超过多少字节时，使用file-loader加载图片。

配置

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10000
        }
      }
    ]
  }
}

打包

打包后可以看出img元素的src此时是base54字符串。

如果将limit改为4000字节，此时支付宝图标大于上限值。

若配置了limit，然后移除file-loader，则打包出错，即当配置limit上限值，此时url-loader依赖file-loader

总结

1、url-loader依赖file-loader
2、当使用url-loader加载图片，图片大小小于上限值，则将图片转base64字符串，；否则使用file-loader加载图片，都是为了提高浏览器加载图片速度。
3、使用url-loader加载图片比file-loader更优秀