base64-inline-loader

2.0.1 verified Sat Apr 25 auth: no javascript

Webpack loader that encodes binary files (images, fonts) into Base64 data URIs inline. v2.0.1, stable with occasional updates. Differentiates from url-loader / file-loader by enforcing base64 encoding for all matched assets without file-size fallback. Supports configurable file size limit and custom MIME-type mapping. Requires webpack 4+ and Node >=6.2.

Common errors

error Module parse failed: Unexpected token (1:0) ↓

cause Webpack cannot parse binary files without a loader matching the rule.

fix

Add base64-inline-loader rule for binary file types or use file-loader/url-loader.

error Error: 'base64-inline-loader' is not a valid loader. ↓

cause Loader not installed or webpack config not written in proper JSON.

fix

Run 'npm install base64-inline-loader --save-dev' and ensure config uses object syntax for options.

error WARNING in Circular dependency detected: ... ↓

cause Using loader on files imported by itself (e.g., .css importing .png, and .png loaded via base64-inline-loader).

fix

Ensure loader rules are scoped to binary files only, not shared with non-binary rules.

Warnings

deprecated Package uses deprecated query parameter syntax for loader options ↓

fix Use object syntax: { loader: 'base64-inline-loader', options: { limit: 1000 } }

gotcha Loader encodes all files regardless of size; no 'fallback' to file-loader as in url-loader ↓

fix Wanted: set a limit to skip encoding. To exclude: add negative lookahead or use multiple rules.

gotcha Using absolute paths in test regex may cause unexpected behavior ↓

fix Always use relative patterns like /\.(png|jpg)$/ instead of /images/

Install

npm install base64-inline-loader

yarn add base64-inline-loader

pnpm add base64-inline-loader

Imports

base64-inline-loader
```
module: { rules: [{ test: /\.(png|jpg)$/, use: ['base64-inline-loader'] }] }
```
Not a JavaScript import; configure in webpack config as a loader.

Quickstart

Webpack configuration using base64-inline-loader with limit and typeMapper options.

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: [
          {
            loader: 'base64-inline-loader',
            options: {
              limit: 1000, // files <= 1KB are inlined
              typeMapper: { 'image/x-icon': 'image/vnd.microsoft.icon' },
            },
          },
        ],
      },
    ],
  },
};