乐趣区

webpack-中的-fileloader-和-urlloader

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(也就是说上面可以配置 name、outputPath 等选项)。

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

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

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

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

退出移动版