Registry / devops / webfont-webpack-plugin

webfont-webpack-plugin

JSON →
library1.0.0jsnpmunverified

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.

npm install webfont-webpack-plugin
INSTALL
IMPORT
SIG · WEBFONT-WEBPACK-PL
W
webfont-webpack-plugin
devopsjavascriptv1.0.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

WebfontPlugin
✓ import WebfontPlugin from 'webfont-webpack-plugin'
✗ const WebfontPlugin = require('webfont-webpack-plugin')
Default import (ESM) is correct. CommonJS require works but is deprecated in favor of ESM.
WebfontPlugin
✓ const WebfontPlugin = require('webfont-webpack-plugin').default
✗ const WebfontPlugin = require('webfont-webpack-plugin')
In CommonJS, default export is under .default. The direct require gives an object { default: ... }.
WebfontPlugin
✓ import WebfontPlugin from 'webfont-webpack-plugin'
✗ import { WebfontPlugin } from 'webfont-webpack-plugin'
It's a default export, not a named export.

Minimal configuration for generating icon fonts from SVG files using WebfontPlugin.

// webpack.config.js import WebfontPlugin from 'webfont-webpack-plugin'; import path from 'path'; export default { entry: path.resolve(__dirname, 'src/index.js'), output: { path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(svg|eot|ttf|woff|woff2)$/, use: ['url-loader'] }, ], }, plugins: [ new WebfontPlugin({ files: path.resolve(__dirname, 'icons/**/*.svg'), dest: path.resolve(__dirname, 'dist/fonts'), destTemplate: path.resolve(__dirname, 'dist'), fontName: 'myfont', formats: ['ttf', 'woff', 'woff2'], templateOptions: { classPrefix: 'icon-', baseSelector: '.icon', }, }), ], };
Debug
Known issues
deprecatedPlugin relies on deprecated webpack events ('make', 'watch-run', 'run'). These were removed in webpack 5.
fix
Use webpack 4. Consider migrating to webpack 5 with alternative plugin like 'webfont-loader'.
affects: >=1.0.0
breakingDropped support for webpack <4 and node <8.9.0 in recent versions.
fix
Ensure webpack >=4 and node >=8.9.0.
affects: >=0.1.0
gotchaMinimum webfont version required is ^8.0.0.
fix
npm install webfont@^8.0.0
affects: >=0.1.0
gotchaIn CommonJS, require returns an object with default property, not the plugin directly.
fix
Use require('webfont-webpack-plugin').default
affects: >=0.1.0
Errors
Common errors & fixes
TypeError: WebfontPlugin is not a constructor
Using incorrect import/require pattern (e.g., named import or direct require without .default).
fix
Use import WebfontPlugin from 'webfont-webpack-plugin' or const WebfontPlugin = require('webfont-webpack-plugin').default
Cannot find module 'webfont-webpack-plugin'
Package not installed.
fix
npm install --save-dev webfont-webpack-plugin
Error: The 'files' option is required
Missing 'files' option in plugin configuration.
fix
Provide a glob pattern string or array for 'files'.
Upgrade
Version history
1.0.0latest on npm
Audit
Dependencies
webpackrequiredpeer dependency - plugin interfaces with webpack's compilation and watch system
watchpackrequiredpeer dependency - used for file watching in older versions
Agent activity
17 hits · last 30 days
node
16
Resources
webfont-webpack-plugin — npm install webfont-webpack-plugin · libregistry