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