{"id":20039,"library":"font-config-webpack-plugin","title":"font-config-webpack-plugin","description":"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.","status":"active","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/merkle-open/webpack-config-plugins","tags":["javascript","image","webpack","loader"],"install":[{"cmd":"npm install font-config-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add font-config-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add font-config-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required to apply plugin configuration.","package":"webpack","optional":false}],"imports":[{"note":"CommonJS only; ESM import is not supported directly. Use require() or dynamic import().","wrong":"import FontConfigWebpackPlugin from 'font-config-webpack-plugin';","symbol":"FontConfigWebpackPlugin","correct":"const FontConfigWebpackPlugin = require('font-config-webpack-plugin');"},{"note":"Constructor name is PascalCase; case-sensitive.","wrong":"new fontConfigWebpackPlugin()","symbol":"FontConfigWebpackPlugin","correct":"new FontConfigWebpackPlugin()"},{"note":"Use 'name' option, not 'filename'. The option overrides the default file name pattern.","wrong":"new FontConfigWebpackPlugin({ filename: 'fonts/[name].[ext]' })","symbol":"Plugin options","correct":"new FontConfigWebpackPlugin({ name: 'fonts/[name].[ext]' })"}],"quickstart":{"code":"const FontConfigWebpackPlugin = require('font-config-webpack-plugin');\nmodule.exports = {\n  mode: 'production',\n  plugins: [new FontConfigWebpackPlugin()],\n};","lang":"javascript","description":"Minimal webpack configuration using font-config-webpack-plugin in production mode with default settings."},"warnings":[{"fix":"Upgrade webpack to >=4.36.0. If staying on webpack 3, use version 1.x.","message":"Major version 2.0.0+ removed support for webpack <4.","severity":"breaking","affected_versions":"<2.0.0"},{"fix":"For webpack 5, consider using asset modules directly or wait for plugin update.","message":"The 'name' option uses file-loader placeholders; file-loader is deprecated in webpack 5 in favor of asset modules.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Set mode: 'development' or 'production' in webpack config.","message":"Plugin expects webpack mode to be set; otherwise defaults may not apply correctly.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use sibling plugins like image-config-webpack-plugin for images.","message":"Only processes font file types; other assets require separate plugins from the suite.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install --save-dev font-config-webpack-plugin'.","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'font-config-webpack-plugin'"},{"fix":"Use 'const FontConfigWebpackPlugin = require('font-config-webpack-plugin')' and then 'new FontConfigWebpackPlugin()'.","cause":"Incorrect import (e.g., named import instead of default) or typo in class name.","error":"TypeError: FontConfigWebpackPlugin is not a constructor"},{"fix":"Use correct option key 'name' for customizing file naming.","cause":"Passing an option not recognized (e.g., 'filename' instead of 'name').","error":"ValidationError: Invalid options object. Font Config Plugin has been initialized using an options object that does not match the API schema."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}