Nanobots Producing Megastructures
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

base64-inline-loader

1.1.1 • Public • Published

base64-inline-loader

Base64 loader for Webpack

This loader supports the most popular file extensions and can be injected directly into a file as base64 string.

Installation

npm

npm install base64-inline-loader --save

or

package.json

"devDependencies": {
    "base64-inline-loader": "^1.x"
}

Usage

Config

let path = require('path');
 
let Webpack = require('webpack');
const DIR_NAME = path.join(__dirname, '..');
 
module.exports = {
    entry: [
        './index.jsx'
    ],
 
    output: {
        path: `${DIR_NAME}/cache`,
        filename: 'build.js',
        publicPath: '/'
    },
 
    resolve: {
        extensions: ['.js', '.jsx', '.json', '.css'],
    },
 
    target : 'web',
 
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader' ]
            },
 
            {
                test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                use: 'base64-inline-loader?limit=1000&name=[name].[ext]'
            }
        ]
    }
};

Input

@font-face {
    font-family: 'icons';
    src: url('./icon.woff');
}
 
body {
    background-image: url('./image.png');
}

Output

@font-face {
    font-family: 'icons';
    src: url('data:application/x-font-woff;charset=utf-8;base64,[BASE_64_STRING...]')
}
 
body {
    background-image: url('data:application/png;charset=utf-8;base64,[BASE_64_STRING...]');
}

Options

  • limit — The limit can be specified with a query parameter. (Defaults to no limit).
    If the file is greater than the limit (in bytes) the file-loader is used and all query parameters are passed to it.

  • name — The name is a standard option.

For more information about webpack loaders see official documentation.

Tests

npm test

install

npm i base64-inline-loader

Downloadsweekly downloads

5,852

version

1.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability