Webpack参考手册
装载 | Loaders
file-loader
指示 webpack 将所需的对象作为文件发送并返回其公用 URL
安装
npm install --save-dev file-loader
用法
默认情况下,生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。
import img from './file.png'
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}
生成文件 file.png,输出到输出目录并返回 public URL。
"/public/path/0dcbbaa7013869e351f.png"
选项
名称 |
类型 |
默认值 |
描述 |
---|---|---|---|
name |
{String|Function} |
hash.ext |
Configure a custom filenam为你的文件配置自定义文件名模板e template for your file |
context |
{String} |
this.options.context |
配置自定义文件 context,默认为 webpack.config.js context |
publicPath |
{String|Function} |
__webpack_public_path__ |
为你的文件配置自定义 public 发布目录 |
outputPath |
{String|Function} |
'undefined' |
为你的文件配置自定义 output 输出目录 |
useRelativePath |
{Boolean} |
false |
如果你希望为每个文件生成一个相对 url 的 context 时,应该将其设置为 true |
emitFile |
{Boolean} |
true |
默认情况下会生成文件,可以通过将此项设置为 false 来禁止(例如,使用了服务端的 packages) |
您可以使用查询参数为您的文件配置自定义文件名模板name
。例如,要将文件从context
目录复制到保留完整目录结构的输出目录中,可以使用
{String}
webpack.config.js
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
{Function}
webpack.config.js
{
loader: 'file-loader',
options: {
name (file) {
if (env === 'development') {
return '[path][name].[ext]'
}
return '[hash].[ext]'
}
}
}
placeholders
名称 |
类型 |
默认值 |
描述 |
---|---|---|---|
ext |
{String} |
file.extname |
资源扩展名 |
name |
{String} |
file.basename |
资源的基本名称 |
path |
{String} |
file.dirname |
资源相对于 context的路径 |
hash |
{String} |
md5 |
内容的哈希值,下面的 hashes 配置中有更多信息 |
N |
{Number} |
当前文件名按照查询参数 regExp 匹配后获得到第 N 个匹配结果 |
hashes
[<hashType>:hash:<digestType>:<length>]
您可以选择配置
名称 |
类型 |
默认值 |
描述 |
---|---|---|---|
hashType |
{String} |
md5 |
sha1, md5, sha256, sha512 |
digestType |
{String} |
base64 |
hex, base26, base32, base36, base49, base52, base58, base62, base64 |
length |
{Number} |
8 |
字符的长度 |
默认情况下,您指定的路径和名称将在同一目录中输出文件,并使用同一个 URL 路径访问该文件。
context
webpack.config.js
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
context: ''
}
}
您可以指定自定义output
和public
使用路径outputPath
,publicPath
和useRelativePath
publicPath
webpack.config.js
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
publicPath: 'assets/'
}
}
outputPath
webpack.config.js
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'images/'
}
}
useRelativePath
如果你希望为每个文件生成一个相对 URL 的 context
时,应该将 useRelativePath
设置为 true
。
{
loader: 'file-loader',
options: {
useRelativePath: process.env.NODE_ENV === "production"
}
}
emitFile
默认情况下会生成文件,可以通过将此项设置为 false 来禁用(例如使用了服务端的 packages)。
import img from './file.png'
{
loader: 'file-loader',
options: {
emitFile: false
}
}
⚠️返回公用 URL 但并没有发出文件
`${publicPath}/0dcbbaa701328e351f.png`
例子
import png from 'image.png'
webpack.config.js
{
loader: 'file-loader',
options: {
name: 'dirname/[hash].[ext]'
}
}
dirname/0dcbbaa701328ae351f.png
webpack.config.js
{
loader: 'file-loader',
options: {
name: '[sha512:hash:base64:7].[ext]'
}
}
gdyb21L.png
import png from 'path/to/file.png'
webpack.config.js
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]?[hash]'
}
}
path/to/file.png?e43b20c069c4a01867c31e98cbce33c9
装载 | Loaders相关
webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。
主页 | https://webpack.js.org/ |
源码 | https://github.com/webpack/webpack |
发布版本 | 3.8.1 |