有时候我们处理后的文件名称按照一定的规则进行显示:
比如保留原来的文件名、扩展名,同时为了防止重复,包含一个hash值等。
这个时候我们可以使用PlaceHolders来完成,webpack给我们提供了大量的PlaceHolders来显示不同的内容:
例如我们有几个常用的placeholder;
[ext] :处理文件的扩展名;
[name] : 处理文件的名称;
[hash]:文件的内容,使用MD4的散裂函数处理,生成的一个128位的hash值(32个16进制)
[contentHash]:在file-loader 中和[hash]结果是保持一致的(在webpack的一些其他地方不一样,后续会写到)
[hash:<length>]:截图hash的长度,默认32个字符太长了;
[path] :文件相当于webpack配置文件的路径;
使用方法:
module:{
test:/\.(jpg|png|gif|svg|)$/,
use:{
loader:"file-loader",
options:{
outputPath: “img” //输出的路径,打包之后的图片资源放到img文件下了
name: "[name]_[hash:6].[ext]" //决定图片对应的名字 [图片原来的名字]-[哈希值保留6位].[后缀]
}}}