webfont-webpack-plugin

1.0.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error TypeError: WebfontPlugin is not a constructor ↓

cause 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

error Cannot find module 'webfont-webpack-plugin' ↓

cause Package not installed.

fix

npm install --save-dev webfont-webpack-plugin

error Error: The 'files' option is required ↓

cause Missing 'files' option in plugin configuration.

fix

Provide a glob pattern string or array for 'files'.

Warnings

deprecated Plugin 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'.

breaking Dropped support for webpack <4 and node <8.9.0 in recent versions. ↓

fix Ensure webpack >=4 and node >=8.9.0.

gotcha Minimum webfont version required is ^8.0.0. ↓

fix npm install webfont@^8.0.0

gotcha In CommonJS, require returns an object with default property, not the plugin directly. ↓

fix Use require('webfont-webpack-plugin').default

Install

npm install webfont-webpack-plugin

yarn add webfont-webpack-plugin

pnpm add webfont-webpack-plugin

Imports

WebfontPlugin
wrong
```
const WebfontPlugin = require('webfont-webpack-plugin')
```
correct
```
import WebfontPlugin from 'webfont-webpack-plugin'
```
Default import (ESM) is correct. CommonJS require works but is deprecated in favor of ESM.

WebfontPlugin

wrong

const WebfontPlugin = require('webfont-webpack-plugin')

correct

const WebfontPlugin = require('webfont-webpack-plugin').default

In CommonJS, default export is under .default. The direct require gives an object { default: ... }.

WebfontPlugin

wrong

import { WebfontPlugin } from 'webfont-webpack-plugin'

correct

import WebfontPlugin from 'webfont-webpack-plugin'

It's a default export, not a named export.

Quickstart

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',
      },
    }),
  ],
};