{"id":19380,"library":"base64-inline-loader","title":"base64-inline-loader","description":"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.","status":"active","version":"2.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/monolithed/base64-inline-loader","tags":["javascript","webpack","base64"],"install":[{"cmd":"npm install base64-inline-loader","lang":"bash","label":"npm"},{"cmd":"yarn add base64-inline-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add base64-inline-loader","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Not a JavaScript import; configure in webpack config as a loader.","symbol":"base64-inline-loader","correct":"module: { rules: [{ test: /\\.(png|jpg)$/, use: ['base64-inline-loader'] }] }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(jpe?g|png|ttf|eot|svg|woff(2)?)(\\?[a-z0-9=&.]+)?$/,\n        use: [\n          {\n            loader: 'base64-inline-loader',\n            options: {\n              limit: 1000, // files <= 1KB are inlined\n              typeMapper: { 'image/x-icon': 'image/vnd.microsoft.icon' },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};","lang":"javascript","description":"Webpack configuration using base64-inline-loader with limit and typeMapper options."},"warnings":[{"fix":"Use object syntax: { loader: 'base64-inline-loader', options: { limit: 1000 } }","message":"Package uses deprecated query parameter syntax for loader options","severity":"deprecated","affected_versions":">=1.0.0 <2.0.0"},{"fix":"Wanted: set a limit to skip encoding. To exclude: add negative lookahead or use multiple rules.","message":"Loader encodes all files regardless of size; no 'fallback' to file-loader as in url-loader","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use relative patterns like /\\.(png|jpg)$/ instead of /images/","message":"Using absolute paths in test regex may cause unexpected behavior","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Add base64-inline-loader rule for binary file types or use file-loader/url-loader.","cause":"Webpack cannot parse binary files without a loader matching the rule.","error":"Module parse failed: Unexpected token (1:0)"},{"fix":"Run 'npm install base64-inline-loader --save-dev' and ensure config uses object syntax for options.","cause":"Loader not installed or webpack config not written in proper JSON.","error":"Error: 'base64-inline-loader' is not a valid loader."},{"fix":"Ensure loader rules are scoped to binary files only, not shared with non-binary rules.","cause":"Using loader on files imported by itself (e.g., .css importing .png, and .png loaded via base64-inline-loader).","error":"WARNING in Circular dependency detected: ..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}