文章/答案/技术大牛

发布

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18