font-config-webpack-plugin

2.0.3 verified Sat Apr 25 auth: no javascript

Preset webpack plugin that configures loaders for font files (e.g., woff, woff2, ttf, eot, svg) with best practices for development and production modes. Version 2.0.3 is the latest stable release, part of the common-config-webpack-plugin suite maintained by Merkle Open. It automatically adjusts configuration based on webpack mode, supports long-term caching via content hash, and integrates with file-loader. Compared to manual webpack font configuration, it provides a zero-config setup with sensible defaults.

Common errors

error Error: Cannot find module 'font-config-webpack-plugin' ↓

cause Package not installed or not in node_modules.

fix

Run 'npm install --save-dev font-config-webpack-plugin'.

error TypeError: FontConfigWebpackPlugin is not a constructor ↓

cause Incorrect import (e.g., named import instead of default) or typo in class name.

fix

Use 'const FontConfigWebpackPlugin = require('font-config-webpack-plugin')' and then 'new FontConfigWebpackPlugin()'.

error ValidationError: Invalid options object. Font Config Plugin has been initialized using an options object that does not match the API schema. ↓

cause Passing an option not recognized (e.g., 'filename' instead of 'name').

fix

Use correct option key 'name' for customizing file naming.

Warnings

breaking Major version 2.0.0+ removed support for webpack <4. ↓

fix Upgrade webpack to >=4.36.0. If staying on webpack 3, use version 1.x.

deprecated The 'name' option uses file-loader placeholders; file-loader is deprecated in webpack 5 in favor of asset modules. ↓

fix For webpack 5, consider using asset modules directly or wait for plugin update.

gotcha Plugin expects webpack mode to be set; otherwise defaults may not apply correctly. ↓

fix Set mode: 'development' or 'production' in webpack config.

gotcha Only processes font file types; other assets require separate plugins from the suite. ↓

fix Use sibling plugins like image-config-webpack-plugin for images.

Install

npm install font-config-webpack-plugin

yarn add font-config-webpack-plugin

pnpm add font-config-webpack-plugin

Imports

FontConfigWebpackPlugin

wrong

import FontConfigWebpackPlugin from 'font-config-webpack-plugin';

correct

const FontConfigWebpackPlugin = require('font-config-webpack-plugin');

CommonJS only; ESM import is not supported directly. Use require() or dynamic import().

FontConfigWebpackPlugin
wrong
```
new fontConfigWebpackPlugin()
```
correct
```
new FontConfigWebpackPlugin()
```
Constructor name is PascalCase; case-sensitive.

Plugin options

wrong

new FontConfigWebpackPlugin({ filename: 'fonts/[name].[ext]' })

correct

new FontConfigWebpackPlugin({ name: 'fonts/[name].[ext]' })

Use 'name' option, not 'filename'. The option overrides the default file name pattern.

Quickstart

Minimal webpack configuration using font-config-webpack-plugin in production mode with default settings.

const FontConfigWebpackPlugin = require('font-config-webpack-plugin');
module.exports = {
  mode: 'production',
  plugins: [new FontConfigWebpackPlugin()],
};