Nitrate Processed Mincemeat

    babel-plugin-file-loader-root

    1.1.1 • Public • Published

    babel-plugin-file-loader-root npm

    Works the same as Webpack's file-loader, but on server side

    Installation

    npm install babel-plugin-file-loader-root --save
    

    Then put following "file-loader" as plugin in .babelrc:

    {
      "plugins": ["file-loader-root"]
    }

    This is equivalent to following default configuration:

    {
      "plugins": [
        [
          "file-loader-root",
          {
            "name": "[hash].[ext]",
            "extensions": ["png", "jpg", "jpeg", "gif", "svg"],
            "publicPath": "/public",
            "outputPath": "/public",
            "context": "",
            "limit": 0
          }
        ]
      ]
    }

    How it works

    More or less as follows:

    1. Processes only import and require that reference files ending with one of "extensions"
    2. Calculates actual $name of resource by substituting placeholders in "name"
    3. Copies resource into $ROOT/$outputPath/$name where $ROOT is .babelrc location.
    4. Replaces import and require 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"
    

    Options

    rootPath

    Set's the default rootPath for where assets should be exported to (overwrites babel srcRoot).

    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-root 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

    Install

    npm i babel-plugin-file-loader-root

    DownloadsWeekly Downloads

    1

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    13.8 kB

    Total Files

    5

    Last publish

    Collaborators

    • c_ogoo
    • simonstaton
    • bynd-fe