{"id":20766,"library":"webpack-font-preload-plugin","title":"webpack-font-preload-plugin","description":"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.","status":"active","version":"1.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/sn-satyendra/webpack-font-preload-plugin","tags":["javascript","webpack","preload","fonts","prefetch","typescript"],"install":[{"cmd":"npm install webpack-font-preload-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-font-preload-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-font-preload-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency - plugin integrates with webpack compilation","package":"webpack","optional":false},{"reason":"used to manipulate HTML during asset processing","package":"jsdom","optional":false},{"reason":"required for webpack source handling","package":"webpack-sources","optional":false}],"imports":[{"note":"ESM default export; in CJS, use require('webpack-font-preload-plugin') which returns the class directly.","wrong":"const WebpackFontPreloadPlugin = require('webpack-font-preload-plugin').default","symbol":"default","correct":"import WebpackFontPreloadPlugin from 'webpack-font-preload-plugin'"},{"note":"The plugin is a default export, not a named export.","wrong":"import { WebpackFontPreloadPlugin } from 'webpack-font-preload-plugin'","symbol":"WebpackFontPreloadPlugin","correct":"import WebpackFontPreloadPlugin from 'webpack-font-preload-plugin'"},{"note":"TypeScript types exported; Options type available since v1.4.0.","wrong":"","symbol":"type Options","correct":"import type { Options } from 'webpack-font-preload-plugin'"}],"quickstart":{"code":"const WebpackFontPreloadPlugin = require('webpack-font-preload-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: __dirname + '/dist',\n    filename: 'bundle.js'\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(woff|woff2|eot|ttf|otf)$/,\n        use: ['file-loader']\n      }\n    ]\n  },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new WebpackFontPreloadPlugin({\n      // Options: 'preload' or 'prefetch'\n      rel: 'preload',\n      // Optional: filter fonts by regex\n      filter: /fonts\\/.*\\.woff2$/\n    })\n  ]\n};","lang":"javascript","description":"Basic webpack configuration to preload font files. Shows plugin setup with HtmlWebpackPlugin, file-loader for fonts, and preload option."},"warnings":[{"fix":"If using TypeScript, import the default export as described. No further changes needed.","message":"In v1.4.0, the TypeScript types were added, changing the import behavior for TypeScript users. Previously, the plugin had no types.","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"Run npm install jsdom to add it explicitly if not included by npm automatically.","message":"The plugin relies on jsdom to parse and modify HTML. Ensure jsdom is installed as a dependency.","severity":"gotcha","affected_versions":">=1.3.0"},{"fix":"Add new HtmlWebpackPlugin() to your webpack plugins array.","message":"The plugin requires HtmlWebpackPlugin to be present in the plugins array; otherwise, no HTML file is generated and fonts are not preloaded.","severity":"gotcha","affected_versions":">=1.0.1"},{"fix":"Upgrade to v1.4.1 or later, or ensure publicPath is a non-empty string.","message":"The publicPath option might not work as expected if set to an empty string; fixed in v1.4.1.","severity":"deprecated","affected_versions":"<=1.4.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Upgrade to version 2.0.0-beta.0 or later, or use a hook shim. Alternatively, stick with webpack 4.","cause":"Incompatibility with webpack 5 hooks in versions before 2.0.0-beta.0.","error":"TypeError: Cannot read properties of undefined (reading 'tapAsync')"},{"fix":"Upgrade to v1.4.1+ or use the correct instantiation: new WebpackFontPreloadPlugin() without extra options.","cause":"Incorrect usage in webpack 5 with older plugin versions (before v1.4.1).","error":"Error: Property 'apply' is missing in type 'WebpackFontPreloadPlugin'"},{"fix":"Install jsdom: npm install jsdom --save-dev","cause":"Missing jsdom dependency since v1.3.0.","error":"Module not found: Error: Can't resolve 'jsdom'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}