file-size-loader v2.1.1
npm install --save-dev file-size-loader
By default the filename of the resulting file is the MD5 hash of the file's contents with the original extension of the required resource.
import img from './file.png'
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-size-loader',
options: {}
}
]
}
]
}
}
Emits file.png
as file in the output directory and returns object:
{
src: "/public/path/0dcbbaa7013869e351f.png",
format: "png",
size: 1024 // file size in bytes
}
Name | Type | Default | Description |
---|---|---|---|
name | {String\|Function} | [hash].[ext] | Configure a custom filename template for your file |
context | {String} | this.options.context | Configure a custom file context, defaults to webpack.config.js context |
publicPath | {String\|Function} | __webpack_public_path__ | Configure a custom public path for your files |
outputPath | {String\|Function} | 'undefined' | Configure a custom output path for your files |
useRelativePath | {Boolean} | false | Should be true if you wish to generate a context relative URL for each file |
emitFile | {Boolean} | true | By default a file is emitted, however this can be disabled if required (e.g. for server side packages) |
name
You can configure a custom filename template for your file using the query parameter name
. For instance, to copy a file from your context
directory into the output directory retaining the full directory structure, you might use
{String}
webpack.config.js
{
loader: 'file-size-loader',
options: {
name: '[path][name].[ext]'
}
}
{Function}
webpack.config.js
{
loader: 'file-size-loader',
options: {
name (file) {
if (env === 'development') {
return '[path][name].[ext]'
}
return '[hash].[ext]'
}
}
}
placeholders
Name | Type | Default | Description |
---|---|---|---|
[ext] | {String} | file.extname | The extension of the resource |
[name] | {String} | file.basename | The basename of the resource |
[path] | {String} | file.dirname | The path of the resource relative to the context |
[hash] | {String} | md5 | The hash of the content, hashes below for more info |
[N] | {Number} | |The n-th match obtained from matching the current file name against the query param regExp |
hashes
[<hashType>:hash:<digestType>:<length>]
optionally you can configure
Name | Type | Default | Description |
---|---|---|---|
hashType | {String} | md5 | sha1 , md5 , sha256 , sha512 |
digestType | {String} | base64 | hex , base26 , base32 , base36 , base49 , base52 , base58 , base62 , base64 |
length | {Number} | 8 | The length in chars |
By default, the path and name you specify will output the file in that same directory and will also use that same URL path to access the file.
context
webpack.config.js
{
loader: 'file-size-loader',
options: {
name: '[path][name].[ext]',
context: ''
}
}
You can specify custom output
and public
paths by using outputPath
, publicPath
and useRelativePath
publicPath
webpack.config.js
{
loader: 'file-size-loader',
options: {
name: '[path][name].[ext]',
publicPath: 'assets/'
}
}
outputPath
webpack.config.js
{
loader: 'file-size-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'images/'
}
}
useRelativePath
useRelativePath
should be true
if you wish to generate a relative URL to the for each file context.
{
loader: 'file-size-loader',
options: {
useRelativePath: process.env.NODE_ENV === "production"
}
}
emitFile
By default a file is emitted, however this can be disabled if required (e.g. for server side packages).
import img from './file.png'
{
loader: 'file-size-loader',
options: {
emitFile: false
}
}
⚠️ Returns the public URL but does not emit a file
`${publicPath}/0dcbbaa701328e351f.png`
import png from 'image.png'
webpack.config.js
{
loader: 'file-size-loader',
options: {
name: 'dirname/[hash].[ext]'
}
}
dirname/0dcbbaa701328ae351f.png
webpack.config.js
{
loader: 'file-size-loader',
options: {
name: '[sha512:hash:base64:7].[ext]'
}
}
gdyb21L.png
import png from 'path/to/file.png'
webpack.config.js
{
loader: 'file-size-loader',
options: {
name: '[path][name].[ext]?[hash]'
}
}
path/to/file.png?e43b20c069c4a01867c31e98cbce33c9