1. File Loader

指示webpack发出所需的对象作为文件，并返回它的公共URL

1.1. 安装

npm install --save-dev file-loader

1.2. 用法

默认情况下，生成的文件的文件名就是文件内容的 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/path/0dcbbaa7013869e351f.png"
// 文件名为hash值
// 扩展名与原始文件保持一致

1.3. 选项

1.3.1. name

可以使用查询参数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

hashes

[<hashType>:hash:<digestType>:<length>] 你也可以选择配置

默认情况下，您指定的路径和名称将在同一个目录中输出该文件，并将使用相同的URL路径来访问该文件。

1.3.2. context

webpack.config.js

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

你可以使用outputPath, publicPath 和 useRelativePath来指定自定义的output 和 public路径。

1.3.3. publicPath

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    publicPath: 'assets/'
  }  
}

1.3.4. outputPath

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    outputPath: 'images/'
  }  
}

1.3.5. useRelativePath

如果您希望为每个文件上下文生成一个相对URL，useRelativePath 应该是true

{
  loader: 'file-loader',
  options: {
    useRelativePath: process.env.NODE_ENV === "production"
  }
}

1.3.6. emitFile

默认情况下文件是被发射的，但是如果需要，这是可以被禁用的（例如，对于服务器端的package）。

import img from './file.png'

{
  loader: 'file-loader',
  options: {
    emitFile: false
  }  
}

⚠️ 返回公共URL，但不发出文件

`${publicPath}/0dcbbaa701328e351f.png`

1.4. 示例

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

1.5. 贡献者

Juho Vepsäläinen

Joshua Wiens

Michael Ciniawsky

Alexander Krasnoyarov