babel-plugin-file-loader
v2.0.0
Published
Like file-loader for webpack, but for Babel. Works with SSE apps.
Downloads
27,828
Maintainers
Readme
babel-plugin-file-loader
Works the same as Webpack's file-loader, but on server side. With 95% test coverage!
Installation
yarn add babel-plugin-file-loader
Or if you like npm:
npm install babel-plugin-file-loader --save
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": "",
"limit": 0
}
]
]
}
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. Setting value null
prevents the plugin to copy the file.
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"
.
limit
Value in byte to determine if the content is base64 inlined. In that case, the file is not copy to outputPath
. It replicates url-loader webpack loader behaviour.
Default is 0 which means nothing is inlined.
Contributing
Yes, please!
License
MIT