file-loader 使用心得

将webpack 里面的图片文件都放在制定文件夹。 配置如下

{
      test: /\.png$/,
      loader: "file-loader?name=imgs/[name]-[hash].[ext]"
    },

下面是查看官方的译本

#用法

基本用法

 

var url  = require(‘file!./file.png')

Webpack config

 

{
      test: /\.png$/,
      loader: "file-loader"
    }

作用是移动文件，默认的filename 值是文件内容的md5和原始文件的扩展

默认文件是会被emitted的。然而这个是可以被disable 的。比如  这里的emitted 不懂事什么意思

var url = require("file?emitFile=false!./file.png");

###filename template placeholders

[ext] 资源的扩展名

[name] 资源的名称

[path] 资源相对于上下文的查询参数或选项的地址

[<hashType>:hash:<digestType>:length]可以配置的可选参数

  hashType: md5 sha1 sha256 sha512

  digestType:hex, base26, base32, base36, base49, base52, base58, base62, base64

 length 字符长度。保留制定长度的文件名称名

[N] 获取当前文件的名称与查询正则的第N个匹配结果