原文地址：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
lengththe 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
