HTML Webpack Externals Plugin

3.8.0 verified Sat Apr 25 auth: no javascript maintenance

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.

Common errors

error Error: Cannot find module 'html-webpack-externals-plugin' ↓

cause Package not installed or not resolved correctly.

fix

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

error TypeError: HtmlWebpackExternalsPlugin is not a constructor ↓

cause Incorrect import (e.g., using named import instead of default).

fix

Use const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

error Error: HookWebpackError: Cannot read property 'tap' of undefined ↓

cause Incompatible webpack or html-webpack-plugin version hooks.

fix

Ensure html-webpack-plugin is v3.x and webpack is v4.x. The plugin may not work with webpack 5.

Warnings

breaking Requires html-webpack-plugin >= 2.0.0 and < 4.0.0? Not specified but likely incompatible with v4. ↓

fix Use html-webpack-plugin v3.x or lower. For v4, consider using html-webpack-plugin's built-in script loading or other alternatives.

gotcha The plugin does not automatically add externals to webpack's external config. You must still configure webpack externals manually. ↓

fix Add `externals: { 'react': 'React', 'react-dom': 'ReactDOM' }` to your webpack config.

gotcha The `global` property must match the global variable name expected by webpack externals and the actual script's global export. ↓

fix Ensure consistency: the global name in the plugin entry, webpack externals, and the CDN script's object reference all match.

deprecated The plugin has not been updated since 2019. It may not work with newer webpack versions (4/5). ↓

fix Consider using `html-webpack-plugin`'s own `externals` option or manually adding scripts via template.

Install

npm install html-webpack-externals-plugin

yarn add html-webpack-externals-plugin

pnpm add html-webpack-externals-plugin

Imports

HtmlWebpackExternalsPlugin

wrong

import HtmlWebpackExternalsPlugin from 'html-webpack-externals-plugin';

correct

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

This package uses CommonJS; no default ESM export is provided.

HtmlWebpackExternalsPlugin

wrong

import { HtmlWebpackExternalsPlugin } from 'html-webpack-externals-plugin';

correct

import HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

There is no named export; the plugin is exported as a single constructor.

HtmlWebpackExternalsPlugin (TypeScript)
wrong
```
import * as HtmlWebpackExternalsPlugin from 'html-webpack-externals-plugin';
```
correct
```
import HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
```
TypeScript users should use `import = require()` syntax for CommonJS compatibility. The package does not ship its own type definitions.

Quickstart

Configures webpack to externalize React and ReactDOM via CDN URLs, automatically adding script tags to HTML.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: 'react',
          entry: 'https://unpkg.com/react@16/umd/react.production.min.js',
          global: 'React'
        },
        {
          module: 'react-dom',
          entry: 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
          global: 'ReactDOM'
        }
      ],
      // Optional: hash the external URLs
      hash: true,
      // Optional: specify file type (js or css)
      filetype: 'js'
    })
  ]
};