Registry / devops / preload-webpack-plugin

preload-webpack-plugin

library2.3.0jsnpmunverified

Preload-webpack-plugin (v2.3.0) enhances html-webpack-plugin by adding link rel=preload and prefetch resource hints for scripts and other assets. It integrates with webpack 3 and is developed by Google Chrome Labs. The v3 alpha/beta branches add webpack 4 support and target node >= 6. Key differentiators: automatic preloading of async chunks, granular control via include/exclude options, and support for multiple HtmlWebpackPlugin instances. Unlike manual preloading, it covers all script types (initial, async, dynamic) with minimal config.

devops

npm install preload-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · PRELOAD-WEBPACK-PL

preload-webpack-plugin

devopsjavascriptv2.3.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.

PreloadWebpackPlugin

✓ const PreloadWebpackPlugin = require('preload-webpack-plugin');

CommonJS require; ESM import not supported in v2.x.

PreloadWebpackPlugin

✓ import PreloadWebpackPlugin from 'preload-webpack-plugin';

✗ import { PreloadWebpackPlugin } from 'preload-webpack-plugin';

Default export; named import will fail.

plugins array

✓ new PreloadWebpackPlugin({ rel: 'preload', include: 'asyncChunks' })

✗ new PreloadWebpackPlugin()

Options are required; at least 'rel' must be specified.

Configure webpack to preload async chunks via html-webpack-plugin.

Debug

Known issues

gotchaMust specify at least `rel` option (e.g., 'preload' or 'prefetch').

fix

new PreloadWebpackPlugin({ rel: 'preload', ... })

affects: >=2.0.0

breakingv3.0.0 drops support for node < 6; requires html-webpack-plugin v4+.

fix

Upgrade node to version >=6, use html-webpack-plugin v4 or later.

affects: >=3.0.0-beta.1

deprecatedPlugin is not compatible with webpack 5; v3.0.0 alphas target webpack 4 only.

fix

Consider alternative like @vue/preload-webpack-plugin or use webpack 4.

affects: <3.0.0

gotcha`include: 'allAssets'` may include CSS, fonts, etc.; not just scripts.

fix

Use `include: 'asyncChunks'` or `include: 'initial'` for scripts only.

affects: >=2.0.0

gotchaMultiple HtmlWebpackPlugin instances require separate PreloadWebpackPlugin instance per HTML file.

fix

Add a new PreloadWebpackPlugin for each HtmlWebpackPlugin.

affects: >=2.1.0

Errors

Common errors & fixes

TypeError: Cannot read property 'hooks' of undefined

Plugin used with webpack 4+ but v2.x does not support webpack 4 hooks.

fix

Use v3.0.0 alpha/beta (npm install preload-webpack-plugin@next) or downgrade webpack to v3.

Error: 'rel' option is required

PreloadWebpackPlugin instantiated without `rel` option.

fix

Add rel: 'preload' or rel: 'prefetch' to the plugin options.

Module not found: Error: Can't resolve 'html-webpack-plugin'

html-webpack-plugin not installed as a dependency.

fix

Run npm install --save-dev html-webpack-plugin.

Upgrade

Version history

2.3.0latest on npm

Audit

Dependencies

html-webpack-pluginrequiredRequired as a peer dependency; the plugin manipulates html-webpack-plugin's output.

webpackrequiredPeer dependency; the plugin hooks into webpack's compilation process.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/googlechromelabs/preload-webpack-plugin ↗

packagehttps://www.npmjs.com/package/preload-webpack-plugin ↗