Registry / devops / webpack-font-preload-plugin

webpack-font-preload-plugin

JSON →
library1.5.0jsnpmunverified

A webpack plugin that automatically adds preload or prefetch links for font assets to the HTML output, improving page load performance by prioritizing font loading. Current stable version is 1.5.0, with a 2.0.0-beta.0 release in development. Release cadence is irregular. Key differentiators: zero-config for most webpack setups, supports both webpack 4 and 5, provides filtering and custom HTML replacement callbacks. Built-in TypeScript types since v1.4.0. Requires jsdom and webpack-sources as dependencies.

devops
npm install webpack-font-preload-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · WEBPACK-FONT-PRELO
W
webpack-font-preload-plugin
devopsjavascriptv1.5.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.

default
✓ import WebpackFontPreloadPlugin from 'webpack-font-preload-plugin'
✗ const WebpackFontPreloadPlugin = require('webpack-font-preload-plugin').default
ESM default export; in CJS, use require('webpack-font-preload-plugin') which returns the class directly.
WebpackFontPreloadPlugin
✓ import WebpackFontPreloadPlugin from 'webpack-font-preload-plugin'
✗ import { WebpackFontPreloadPlugin } from 'webpack-font-preload-plugin'
The plugin is a default export, not a named export.
type Options
✓ import type { Options } from 'webpack-font-preload-plugin'
TypeScript types exported; Options type available since v1.4.0.

Basic webpack configuration to preload font files. Shows plugin setup with HtmlWebpackPlugin, file-loader for fonts, and preload option.

const WebpackFontPreloadPlugin = require('webpack-font-preload-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'bundle.js' }, module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] } ] }, plugins: [ new HtmlWebpackPlugin(), new WebpackFontPreloadPlugin({ // Options: 'preload' or 'prefetch' rel: 'preload', // Optional: filter fonts by regex filter: /fonts\/.*\.woff2$/ }) ] };
Debug
Known issues
breakingIn v1.4.0, the TypeScript types were added, changing the import behavior for TypeScript users. Previously, the plugin had no types.
fix
If using TypeScript, import the default export as described. No further changes needed.
affects: >=1.4.0
gotchaThe plugin relies on jsdom to parse and modify HTML. Ensure jsdom is installed as a dependency.
fix
Run npm install jsdom to add it explicitly if not included by npm automatically.
affects: >=1.3.0
gotchaThe plugin requires HtmlWebpackPlugin to be present in the plugins array; otherwise, no HTML file is generated and fonts are not preloaded.
fix
Add new HtmlWebpackPlugin() to your webpack plugins array.
affects: >=1.0.1
deprecatedThe publicPath option might not work as expected if set to an empty string; fixed in v1.4.1.
fix
Upgrade to v1.4.1 or later, or ensure publicPath is a non-empty string.
affects: <=1.4.0
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'tapAsync')
Incompatibility with webpack 5 hooks in versions before 2.0.0-beta.0.
fix
Upgrade to version 2.0.0-beta.0 or later, or use a hook shim. Alternatively, stick with webpack 4.
Error: Property 'apply' is missing in type 'WebpackFontPreloadPlugin'
Incorrect usage in webpack 5 with older plugin versions (before v1.4.1).
fix
Upgrade to v1.4.1+ or use the correct instantiation: new WebpackFontPreloadPlugin() without extra options.
Module not found: Error: Can't resolve 'jsdom'
Missing jsdom dependency since v1.3.0.
fix
Install jsdom: npm install jsdom --save-dev
Upgrade
Version history
1.5.0latest on npm
Audit
Dependencies
webpackrequiredpeer dependency - plugin integrates with webpack compilation
jsdomrequiredused to manipulate HTML during asset processing
webpack-sourcesrequiredrequired for webpack source handling
Agent activity
8 hits · last 30 days
node
8
Resources
githubhttps://github.com/sn-satyendra/webpack-font-preload-plugin ↗
packagehttps://www.npmjs.com/package/webpack-font-preload-plugin ↗
webpack-font-preload-plugin — npm install webpack-font-preload-plugin · libregistry