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
• [:hash::] 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