Skip to content

bt404/base64-inline-loader

Repository files navigation

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

About

Base64 loader for Webpack

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published