{"id":20107,"library":"html-webpack-externals-plugin","title":"HTML Webpack Externals Plugin","description":"A Webpack plugin v3.8.0 (latest) that works alongside html-webpack-plugin to externalize specified module bundles, injecting script or link tags into the generated HTML. It automates the process of using pre-packaged vendor bundles (e.g., React, Lodash) via CDN or local files, reducing bundle size and improving caching. Unlike webpack's built-in externals, this plugin integrates directly with html-webpack-plugin to add the corresponding <script> or <link> tags. It requires html-webpack-plugin >=2.0.0 as a peer dependency. The plugin has been in maintenance mode with infrequent updates; last release was in 2019. Supports Node >=4.3.0.","status":"maintenance","version":"3.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/mmiller42/html-webpack-externals-plugin","tags":["javascript","htmlwebpackplugin","webpack","html","externals"],"install":[{"cmd":"npm install html-webpack-externals-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-webpack-externals-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-webpack-externals-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for injecting externals into HTML output.","package":"html-webpack-plugin","optional":false}],"imports":[{"note":"This package uses CommonJS; no default ESM export is provided.","wrong":"import HtmlWebpackExternalsPlugin from 'html-webpack-externals-plugin';","symbol":"HtmlWebpackExternalsPlugin","correct":"const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');"},{"note":"There is no named export; the plugin is exported as a single constructor.","wrong":"import { HtmlWebpackExternalsPlugin } from 'html-webpack-externals-plugin';","symbol":"HtmlWebpackExternalsPlugin","correct":"import HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');"},{"note":"TypeScript users should use `import = require()` syntax for CommonJS compatibility. The package does not ship its own type definitions.","wrong":"import * as HtmlWebpackExternalsPlugin from 'html-webpack-externals-plugin';","symbol":"HtmlWebpackExternalsPlugin (TypeScript)","correct":"import HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');"}],"quickstart":{"code":"const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    path: './dist',\n    filename: 'bundle.js'\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/index.html'\n    }),\n    new HtmlWebpackExternalsPlugin({\n      externals: [\n        {\n          module: 'react',\n          entry: 'https://unpkg.com/react@16/umd/react.production.min.js',\n          global: 'React'\n        },\n        {\n          module: 'react-dom',\n          entry: 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',\n          global: 'ReactDOM'\n        }\n      ],\n      // Optional: hash the external URLs\n      hash: true,\n      // Optional: specify file type (js or css)\n      filetype: 'js'\n    })\n  ]\n};","lang":"javascript","description":"Configures webpack to externalize React and ReactDOM via CDN URLs, automatically adding script tags to HTML."},"warnings":[{"fix":"Use html-webpack-plugin v3.x or lower. For v4, consider using html-webpack-plugin's built-in script loading or other alternatives.","message":"Requires html-webpack-plugin >= 2.0.0 and < 4.0.0? Not specified but likely incompatible with v4.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Add `externals: { 'react': 'React', 'react-dom': 'ReactDOM' }` to your webpack config.","message":"The plugin does not automatically add externals to webpack's external config. You must still configure webpack externals manually.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Ensure consistency: the global name in the plugin entry, webpack externals, and the CDN script's object reference all match.","message":"The `global` property must match the global variable name expected by webpack externals and the actual script's global export.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Consider using `html-webpack-plugin`'s own `externals` option or manually adding scripts via template.","message":"The plugin has not been updated since 2019. It may not work with newer webpack versions (4/5).","severity":"deprecated","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install html-webpack-externals-plugin --save-dev`","cause":"Package not installed or not resolved correctly.","error":"Error: Cannot find module 'html-webpack-externals-plugin'"},{"fix":"Use `const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');`","cause":"Incorrect import (e.g., using named import instead of default).","error":"TypeError: HtmlWebpackExternalsPlugin is not a constructor"},{"fix":"Ensure html-webpack-plugin is v3.x and webpack is v4.x. The plugin may not work with webpack 5.","cause":"Incompatible webpack or html-webpack-plugin version hooks.","error":"Error: HookWebpackError: Cannot read property 'tap' of undefined","affected_versions":">=3.5.0"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}