file-loader

原文地址：https://webpack.js.org/loaders/file-loader/
webpack版本：2.2.1

特例：在组件的模板文件中，若以相对路径的方式引用资源，file-loader在打包资源时不会改变图片资源的路径。建议在组件的模板文件中使用绝对路径的方式引用资源。若坚持使用相对路径的方式，那么要使用如下形式：

src="${ require(' 资源的相对路径') }"

Install

cnpm install --save-dev file-loader

Usage

默认情况下，经file-loader处理后的文件的文件名变成了文件内容的MD5 hash，后缀名为源文件的后缀名。

var url = require("file-loader!./file.png");
// => emits file.png as file in the output directory and returns the public url
// =>returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
// 注：将file.png以一个文件的方式发布到输出目录下，并且在文件引用位置返回public url，此时文件引用是有效的，图片能够呈现出来。

默认情况下，经file-loader处理后的文件会被发布到输出目录下，但如果需要的话也可以不发布（例如，对于服务端的包来说）

var url = require("file-loader?emitFile=false!./file.png");
// =>  returns the public url but does NOT emit a file
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"
//注： file-loader为文件引用位置返回了public url，但是经其处理后的文件没有被发布到输出目录下，此时文件引用是无效的，图片不能呈现出来。

Filename templates

你可以使用查询参数（query parameter）name来为你的文件配置custom filename template（客户端文件名模式）。例如，从context目录中复制一个文件到输出目录，并且保留完整的目录结构，你可以使用：

?name=[path][name].[ext]

默认情况下，你指定的path和name会将打包后的文件输出到相同的目录中，并且也会使用相同的 URL path来访问该文件。

注意：在webpack2的配置文件中，需将query parameter作为options的属性进行设置。

你可以使用查询参数outputPath和publicPath来指定custom output（客户端输出）和public paths：

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

Filename template placeholders

[ext] the extension of the resource
[name] the basename of the resource
[path] the path of the resource relative to the context query parameter or option.
[hash] the hash of the content, hex-encoded md5 by default
[<hashType>:hash:<digestType>:<length>] optionally you can configure
other hashTypes, i. e. sha1, md5, sha256, sha512
other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
and length the length in chars
[N] the N-th match obtained from matching the current file name against the query param regExp

Examples

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
// use sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64

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