base64-loader

1.0.0 verified Sat Apr 25 auth: no javascript deprecated

Base64 file loader for webpack (v1.0.0, last updated circa 2015). Converts file imports to base64-encoded strings at build time. Purely a webpack loader, no runtime dependencies. Minimal documentation; commonly used for embedding small assets like images or fonts as base64 URIs. Note: This package is outdated and may not work with modern webpack versions (v4/v5). Consider using `url-loader` with `limit` option or `asset modules` in webpack 5.

Common errors

error Module parse failed: Unexpected character 'ÿ' ↓

cause Trying to require a binary file without proper loader configuration.

fix

Add base64-loader to webpack config or use inline require('base64!./file.png').

error Cannot find module 'base64-loader' ↓

cause Missing npm install or incorrect loader name.

fix

Run 'npm install base64-loader' and ensure the string in webpack config matches exactly.

Warnings

deprecated Package is unmaintained and incompatible with webpack 4 and 5. ↓

fix Use webpack's asset modules (type: 'asset/inline') or url-loader instead.

gotcha Only works with webpack 1-3; no updates since 2015. ↓

fix Upgrade to a modern loader or webpack asset modules.

Install

npm install base64-loader

yarn add base64-loader

pnpm add base64-loader

Imports

base64-loader (webpack loader)
wrong
```
require('base64-loader')
```
correct
```
module.exports = { module: { rules: [ { test: /\.txt$/, use: 'base64-loader' } ] } }
```
In webpack config, the loader is referenced as a string, not imported directly. Can also be used inline: require('base64!./file.txt').

Quickstart

Shows how to configure webpack to convert image imports to base64 strings using base64-loader.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: 'base64-loader'
      }
    ]
  }
};

// In your code
import logo from './logo.png';
console.log(logo); // base64 string