Webpack参考手册
装载 | Loaders
url-loader
将文件加载为base64
编码的URL
安装
npm install --save-dev url-loader
用法
url-loader
功能类似于 file-loader
,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。
import img from './image.png'
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
}
选项
Name |
类型 |
默认 |
描述 |
---|---|---|---|
limit |
{Number} |
未定义 |
字节限制为将文件内联为数据网址 |
mimetype |
{String} |
extname |
指定文件的MIME类型(否则从文件扩展名推断) |
fallback |
{String} |
文件加载器 |
文件大于限制时指定文件的加载程序(以字节为单位) |
如果文件大于限制(以字节为单位),file-loader
则默认使用该文件,并将所有查询参数传递给它。您可以使用其他装载程序使用fallback
选项。
限制可以通过加载程序选项指定,默认为无限制。
webpack.config.js
{
loader: 'url-loader',
options: {
limit: 8192
}
}
mimetype
设置文件的MIME类型。如果未指定,则将使用文件扩展名来查找MIME类型。
webpack.config.js
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
fallback
webpack.config.js
{
loader: 'url-loader',
options: {
fallback: 'responsive-loader'
}
}
装载 | Loaders相关
webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。
主页 | https://webpack.js.org/ |
源码 | https://github.com/webpack/webpack |
发布版本 | 3.8.1 |