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個匹配結果