Works the same as Webpack's file-loader, but on server side. With 95% test coverage!
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 } ] ] }More or less as follows:
- Processes only
importandrequirethat reference files ending with one of"extensions" - Calculates actual
$nameof resource by substituting placeholders in"name" - Copies resource into
$ROOT/$outputPath/$namewhere$ROOTis.babelrclocation. - Replaces
importandrequirein code with"$publicPath/$name"string
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.
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.
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" 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].
List of extension file-loader should look for in imports. All other imports are ignored.
Path to directory relative to .babelrc where application source resides. By default "", but can be e.g. "/src".
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.
Yes, please!
MIT