{"id":20704,"library":"webfont-webpack-plugin","title":"webfont-webpack-plugin","description":"Webpack plugin for the webfont package, generating icon fonts (SVG, TTF, WOFF, WOFF2, etc.) from SVG files during the Webpack build process. Currently at version 1.0.0, it supports Webpack 4 and Node >= 8.9.0. Key differentiators: integrates directly with Webpack's compilation pipeline, supports custom templates (CSS, SCSS, etc.), and leverages the webfont API for font generation. The plugin handles font file output and template generation, and works with style loaders for automatic CSS injection.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/itgalaxy/webfont-webpack-plugin","tags":["javascript","cli","standalone","font","fonts","webfont","webfonts","svg","ttf"],"install":[{"cmd":"npm install webfont-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webfont-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webfont-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - plugin interfaces with webpack's compilation and watch system","package":"webpack","optional":false},{"reason":"peer dependency - used for file watching in older versions","package":"watchpack","optional":false}],"imports":[{"note":"Default import (ESM) is correct. CommonJS require works but is deprecated in favor of ESM.","wrong":"const WebfontPlugin = require('webfont-webpack-plugin')","symbol":"WebfontPlugin","correct":"import WebfontPlugin from 'webfont-webpack-plugin'"},{"note":"In CommonJS, default export is under .default. The direct require gives an object { default: ... }.","wrong":"const WebfontPlugin = require('webfont-webpack-plugin')","symbol":"WebfontPlugin","correct":"const WebfontPlugin = require('webfont-webpack-plugin').default"},{"note":"It's a default export, not a named export.","wrong":"import { WebfontPlugin } from 'webfont-webpack-plugin'","symbol":"WebfontPlugin","correct":"import WebfontPlugin from 'webfont-webpack-plugin'"}],"quickstart":{"code":"// webpack.config.js\nimport WebfontPlugin from 'webfont-webpack-plugin';\nimport path from 'path';\n\nexport default {\n  entry: path.resolve(__dirname, 'src/index.js'),\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      { test: /\\.css$/, use: ['style-loader', 'css-loader'] },\n      { test: /\\.(svg|eot|ttf|woff|woff2)$/, use: ['url-loader'] },\n    ],\n  },\n  plugins: [\n    new WebfontPlugin({\n      files: path.resolve(__dirname, 'icons/**/*.svg'),\n      dest: path.resolve(__dirname, 'dist/fonts'),\n      destTemplate: path.resolve(__dirname, 'dist'),\n      fontName: 'myfont',\n      formats: ['ttf', 'woff', 'woff2'],\n      templateOptions: {\n        classPrefix: 'icon-',\n        baseSelector: '.icon',\n      },\n    }),\n  ],\n};","lang":"javascript","description":"Minimal configuration for generating icon fonts from SVG files using WebfontPlugin."},"warnings":[{"fix":"Use webpack 4. Consider migrating to webpack 5 with alternative plugin like 'webfont-loader'.","message":"Plugin relies on deprecated webpack events ('make', 'watch-run', 'run'). These were removed in webpack 5.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Ensure webpack >=4 and node >=8.9.0.","message":"Dropped support for webpack <4 and node <8.9.0 in recent versions.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"npm install webfont@^8.0.0","message":"Minimum webfont version required is ^8.0.0.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use require('webfont-webpack-plugin').default","message":"In CommonJS, require returns an object with default property, not the plugin directly.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use import WebfontPlugin from 'webfont-webpack-plugin' or const WebfontPlugin = require('webfont-webpack-plugin').default","cause":"Using incorrect import/require pattern (e.g., named import or direct require without .default).","error":"TypeError: WebfontPlugin is not a constructor"},{"fix":"npm install --save-dev webfont-webpack-plugin","cause":"Package not installed.","error":"Cannot find module 'webfont-webpack-plugin'"},{"fix":"Provide a glob pattern string or array for 'files'.","cause":"Missing 'files' option in plugin configuration.","error":"Error: The 'files' option is required"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}