@fhoerth/babel-plugin-file-loader v2.0.3
babel-plugin-file-loader
Works the same as Webpack's file-loader, but on server side. With 95% test coverage!
Installation
npm install babel-plugin-file-loader --save
yarn add babel-plugin-file-loader
Then put following "file-loader" as plugin in .babelrc:
{
"plugins": ["file-loader"]
}
This is equivalent to following default configuration:
{
"plugins": [
[
"file-loader",
{
"name": "[hash].[ext]",
"extensions": ["png", "jpg", "jpeg", "gif", "svg"],
"publicPath": "/public",
"outputPath": "/public",
"context": ""
}
]
]
}
How it works
More or less as follows:
- Processes only
import
andrequire
that reference files ending with one of"extensions"
- Calculates actual
$name
of resource by substituting placeholders in"name"
- Copies resource into
$ROOT/$outputPath/$name
where$ROOT
is.babelrc
location. - Replaces
import
andrequire
in code with"$publicPath/$name"
string
Example usage
import img from './file.png'
const img2 = require('./file.svg')
Puts 0dcbbaa7013869e351f.png
and 8d3fe267fe578005541.svg
in the /public
and replaces code with:
const img = "/public/0dcbbaa7013869e351f.png"
const img2 = "/public/8d3fe267fe578005541.svg"
For real-life example go to examples.
Options
outputPath
Tells where to put static files. By default it's "/public"
.
This path is relative to the root of project.
publicPath
Tells what prefix to output in the source. By default it's "/public"
as well but it can be even full url, like so: "http://cdn.example.com/foobar/"
In this case the resulting code is:
const img = "http://cdn.example.com/foobar/0dcbbaa7013869e351f.png"
name
The default is [hash].[ext]
where:
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, see below for more info |
The full format [hash]
is: [<hashType>:hash:<digestType>:<length>]
, where:
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} | 128 | The length in chars |
For example: [md5:hash:base58:8]
or [hash:base36]
.
extensions
List of extension file-loader should look for in imports. All other imports are ignored.
context
Path to directory relative to .babelrc
where application source resides. By default ""
, but can be e.g. "/src"
.
Contributing
Yes, please!
License
6 years ago