file-loader

安装

npm install --save-dev file-loader

用法

默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

var url = require("file-loader!./file.png");
// => 输出 file.png 文件到输出目录并返回public url
// => 即返回 "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"

默认情况下，文件会被输出，不过如果需要的话，也可以不输出（比如使用了服务端的 packages）。

var url = require("file-loader?emitFile=false!./file.png");
// => 返回public url 但是不输出文件
// => 即返回 "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"

文件名模板

你可以使用查询参数 name 为你的文件配置自定义的文件名模板。例如，从你的 context 目录复制文件到输出目录，并且保留完整的目录结构，你可以使用 ?name=[path][name].[ext] 。

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

你可以使用 outputPath 和 publicPath 查询名称参数来指定自定义的输出路径和发布目录。

use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"

文件名模板占位符

[ext] 资源扩展名
[name] 资源的基本名称
[path] 资源相对于 context 查询参数或者配置的路径
[hash] 内容的哈希值，默认为十六进制编码的 md5
[<hashType>:hash:<digestType>:<length>] 可选配置
- 其他的 hashType, 即 sha1, md5, sha256, sha512
- 其他的 digestType, 即 hex, base26, base32, base36, base49, base52, base58, base62, base64
- length 字符的长度
[N] 当前文件名按照查询参数 regExp 匹配后获得到第 N 个匹配结果
示例

require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js

require("file-loader?name=html-[hash:6].html!./page.html");
// => html-109fa8.html

require("file-loader?name=[hash]!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679

require("file-loader?name=[sha512:hash:base64:7].[ext]!./image.png");
// => gdyb21L.png
// 使用 sha512 哈希值替代 md5 并且使用 base64 的 7 个字符

require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// 使用自定义名称，sha512 哈希值替代 md5 并且使用 base64 的 7 个字符

require("file-loader?name=picture.png!./myself.png");
// => picture.png

require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9