url-loader
# url-loader
v5 后弃用：请考虑使用 asset modules (opens new window) 代替。
用于将文件转换为 base64 URI 的 loader。
# 快速开始
首先，你需要安装 url-loader：
npm install url-loader --save-dev
url-loader 功能类似于 file-loader (opens new window), 但是在文件大小（单位为字节）低于指定的限制时，可以返回一个 DataURL。
index.js
import img from './image.png';
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
然后通过你的首选方法运行 webpack。
# 选项
| Name | Type | Default | Description |
|---|---|---|---|
limit (opens new window) | {Boolean|Number|String} | true | 指定文件的最大体积（以字节为单位）。 |
mimetype (opens new window) | {Boolean|String} | 基于 mime-types (opens new window) 库实现转换 | 设置要转换的文件的 MIME 类型。 |
encoding (opens new window) | {Boolean|String} | base64 | 指定用于内联文件的编码。 |
generator (opens new window) | {Function} | () => type/subtype;encoding,base64_data | 你可以创建自己的自定义实现以对数据进行编码。 |
fallback (opens new window) | {String} | file-loader | 指定当目标文件大小超过限制时的替代 loader。 |
esModule (opens new window) | {Boolean} | true | 使用 ES 模块语法。 |
# limit
类型: Boolean|Number|String 默认值: true
该值可以通过 loader 的 options 参数来指定，默认为 undefined。
# Boolean
开启/关闭将文件转换为 base64。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: false,
},
},
],
},
],
},
};
# Number|String
指定文件的最大体积（以字节为单位）。 如果文件体积等于或大于限制，默认情况下将使用 file-loader (opens new window) 并将所有参数传递给它。
可以通过 fallback 选项设置 file-loader 的可选参数。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
# mimetype
类型: Boolean|String 默认值: 基于第三方库 mime-types (opens new window) 来获取 mimetype。
指定用于内联文件的 mimetype。 如果未指定，将使用第三方库 mime-types (opens new window) 来获取 mimetype。
# Boolean
当值为 true 时，允许使用第三方库 mime-types (opens new window) 来获取 mimetype。 而为 false 时，则从数据 URL 中删除 mediatype 部分（如果省略，则默认为 text/plain；charset=US-ASCII）。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
mimetype: false,
},
},
],
},
],
},
};
# String
设置要转换的文件的 MIME 类型。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png',
},
},
],
},
],
},
};
# encoding
类型: Boolean|String 默认值: base64
指定用于内联文件的编码格式。 如果未指定，则 encoding 为 base64。
# Boolean
如果不想使用任何编码，可以将 “encoding” 设置为 false，如果将其设置为 true，则默认使用 base64。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'url-loader',
options: {
encoding: false,
},
},
],
},
],
},
};
# String
它支持下面的编码格式（Node.js Buffers and Character Encodings (opens new window)）：["utf8","utf16le","latin1","base64","hex","ascii","binary","ucs2"]。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'url-loader',
options: {
encoding: 'utf8',
},
},
],
},
],
},
};
# generator
类型： Function 默认值：(mimetype, encoding, content, resourcePath) => mimetype;encoding,base64_content
你可以使用自定义方案来编码数据。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|html)$/i,
use: [
{
loader: 'url-loader',
options: {
// `mimetype` 和 `encoding` 参数将从你传入的参数中中获得
// `resourcePath` 参数是文件的路径。
generator: (content, mimetype, encoding, resourcePath) => {
if (/\.html$/i.test(resourcePath)) {
return `data:${mimetype},${content.toString()}`;
}
return `data:${mimetype}${
encoding ? `;${encoding}` : ''
},${content.toString(encoding)}`;
},
},
},
],
},
],
},
};
# fallback
类型: String 默认值: 'file-loader'
指定当目标文件的大小超过 limit 选项中设置的限制时要使用的替代加载程序。
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
fallback: require.resolve('responsive-loader'),
},
},
],
},
],
},
};
当使用降级 loader 时，其配置项与 url-loader 的配置项相同。
例如为替代 loader（responsive-loader）设置 quality 参数：
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
fallback: require.resolve('responsive-loader'),
quality: 85,
},
},
],
},
],
},
};
# esModule
类型: Boolean 默认值: true
默认情况下，file-loader 生成使用 ES modules 语法的JS模块。 在某些情况下，使用 ES 模块更为合适，比如在 module concatenation (opens new window) 和 tree shaking (opens new window)。
你可以通过以下命令启用 CommonJS 模块语法：
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'url-loader',
options: {
esModule: false,
},
},
],
},
],
},
};
# 示例
# SVG
SVG 可以被压缩至体积更小，尽量避免使用 base64。 你可以从这里 (opens new window)了解更多信息。 你可以使用 mini-svg-data-uri (opens new window) 来压缩 SVG。
webpack.config.js
const svgToMiniDataURI = require('mini-svg-data-uri');
module.exports = {
module: {
rules: [
{
test: /\.svg$/i,
use: [
{
loader: 'url-loader',
options: {
generator: (content) => svgToMiniDataURI(content.toString()),
},
},
],
},
],
},
};
# 贡献
如果你还没有阅读我们的贡献指南，请花一点时间阅读。
CONTRIBUTING (opens new window)
# License
« Previous