赞助 webpack,同时从官方商店购买衣服 所有收益将转到我们的 open collective

file-loader

Instructs webpack to emit the required object as file and to return its public URL

安装

npm install --save-dev file-loader

用法 用法" class="icon-link" href="#用法">

默认情况下,生成的文件的文件名就是文件内容的 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]
描述
为你的文件配置自定义文件名模板
名称
context
类型
{String}
默认值
this.options.context
描述
配置自定义文件 context,默认为 webpack.config.js context
名称
publicPath
类型
{String|Function}
描述
为你的文件配置自定义 public 发布目录
名称
outputPath
类型
{String|Function}
默认值
'undefined'
描述
为你的文件配置自定义 output 输出目录
名称
useRelativePath
类型
{Boolean}
默认值
false
描述
如果你希望为每个文件生成一个相对 url 的 context 时,应该将其设置为 true
名称
emitFile
类型
{Boolean}
默认值
true
描述
默认情况下会生成文件,可以通过将此项设置为 false 来禁止(例如,使用了服务端的 packages)

##

You can configure a custom filename template for your file using the query parameter name. For instance, to copy a file from your context directory into the output directory retaining the full directory structure, you might use

{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>] optionally you can configure

名称
类型
默认值
描述
名称
hashType
类型
{String}
默认值
md5
描述
sha1, md5, sha256, sha512
名称
digestType
类型
{String}
默认值
base64
描述
hex, base26, base32, base36, base49, base52, base58, base62, base64
名称
length
类型
{Number}
默认值
9999
描述
字符的长度

默认情况下,文件会按照你指定的路径和名称输出同一目录中,且会使用相同的 URL 路径来访问文件。

context

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    context: ''
  }
}

你可以使用 outputPathuseRelativePathpublicPath来指定自定义 output 输出路径和 public 发布目录。

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
  }
}

⚠️ 返回 public 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

维护人员


      Juho Vepsäläinen


      Joshua Wiens


      Michael Ciniawsky


      Alexander Krasnoyarov