【webpack】webpack 中的 file-loader 和 url-loader

1. file-loader

// index.js
import doggy from 'doggy.jpg'

console.log(doggy)

// webpack.config.js
module.exports = {
  // 省略其他配置项
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'file-loader'
      }
    }]
  }
}

打包后，file-loader 将 doggy.jpg 移动到了 dist 目录下，并将该图片改名为 11e15173d7f38a223d340822e4364ddb.jpg。

通过配置 name 和 outputPath 选项，可以自定义图片名称和路径。

loader: 'file-loader',
options: {
  name: '[name].[ext]?[hash]',
  outputPath: 'images/'
}

打包后，dist 目录下会生成一个 images 文件夹，里面包含了 doggy.jpg?e43b20c069c4a01867c31e98cbce33c9。

更多 file-loader 的可配置选项及其他内容，参考 file-loader。

2. url-loader

url-loader 将图片转化成 base 编码字符串和 main.js 打包在一起。

// webpack.config.js
module.exports = {
  // 省略其他配置项
  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    }]
  }
}

上述代码设置了 limit 选项，意思是当图片体积小于 8192 字节时，会转换成 base 编码字符串，当图片体积大于 8192 字节时，默认会使用 file-loader（虽然代码没有配置 file-loader，但还是需要使用 npm i file-loader -D 安装），并且会将配置的选项传递给 file-loader（也就是说上面可以配置 name、outputPath 等选项）。

url-loader 默认 limit 是没有限制，如果没有设置，则不管多大的图片都会转换为 base64 编码字符串。

还可以配置 fallback 选项来指定不满足 limit 条件时应当使用的 loader：

loader: 'url-loader',
options: {
  limit: 8192,
  fallback: 'responsive-loader'
}

更多 url-loader 的可配置选项及其他内容，参考 url-loader。