{"id":20276,"library":"preload-webpack-plugin","title":"preload-webpack-plugin","description":"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.","status":"active","version":"2.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/googlechromelabs/preload-webpack-plugin","tags":["javascript","webpack","plugin","html-webpack-plugin","script","preload","resource hints"],"install":[{"cmd":"npm install preload-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add preload-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add preload-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency; the plugin manipulates html-webpack-plugin's output.","package":"html-webpack-plugin","optional":false},{"reason":"Peer dependency; the plugin hooks into webpack's compilation process.","package":"webpack","optional":false}],"imports":[{"note":"CommonJS require; ESM import not supported in v2.x.","symbol":"PreloadWebpackPlugin","correct":"const PreloadWebpackPlugin = require('preload-webpack-plugin');"},{"note":"Default export; named import will fail.","wrong":"import { PreloadWebpackPlugin } from 'preload-webpack-plugin';","symbol":"PreloadWebpackPlugin","correct":"import PreloadWebpackPlugin from 'preload-webpack-plugin';"},{"note":"Options are required; at least 'rel' must be specified.","wrong":"new PreloadWebpackPlugin()","symbol":"plugins array","correct":"new PreloadWebpackPlugin({ rel: 'preload', include: 'asyncChunks' })"}],"quickstart":{"code":"const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst PreloadWebpackPlugin = require('preload-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: { filename: '[name].[hash].js' },\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new PreloadWebpackPlugin({\n      rel: 'preload',\n      include: 'asyncChunks',\n      fileWhitelist: [/\\/dist\\/.*\\.js/]\n    })\n  ]\n};","lang":"javascript","description":"Configure webpack to preload async chunks via html-webpack-plugin."},"warnings":[{"fix":"new PreloadWebpackPlugin({ rel: 'preload', ... })","message":"Must specify at least `rel` option (e.g., 'preload' or 'prefetch').","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Upgrade node to version >=6, use html-webpack-plugin v4 or later.","message":"v3.0.0 drops support for node < 6; requires html-webpack-plugin v4+.","severity":"breaking","affected_versions":">=3.0.0-beta.1"},{"fix":"Consider alternative like @vue/preload-webpack-plugin or use webpack 4.","message":"Plugin is not compatible with webpack 5; v3.0.0 alphas target webpack 4 only.","severity":"deprecated","affected_versions":"<3.0.0"},{"fix":"Use `include: 'asyncChunks'` or `include: 'initial'` for scripts only.","message":"`include: 'allAssets'` may include CSS, fonts, etc.; not just scripts.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Add a new PreloadWebpackPlugin for each HtmlWebpackPlugin.","message":"Multiple HtmlWebpackPlugin instances require separate PreloadWebpackPlugin instance per HTML file.","severity":"gotcha","affected_versions":">=2.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use v3.0.0 alpha/beta (npm install preload-webpack-plugin@next) or downgrade webpack to v3.","cause":"Plugin used with webpack 4+ but v2.x does not support webpack 4 hooks.","error":"TypeError: Cannot read property 'hooks' of undefined"},{"fix":"Add rel: 'preload' or rel: 'prefetch' to the plugin options.","cause":"PreloadWebpackPlugin instantiated without `rel` option.","error":"Error: 'rel' option is required"},{"fix":"Run npm install --save-dev html-webpack-plugin.","cause":"html-webpack-plugin not installed as a dependency.","error":"Module not found: Error: Can't resolve 'html-webpack-plugin'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}