script-ext-html-webpack-plugin

2.1.5 verified Sat Apr 25 auth: no javascript deprecated

Extends html-webpack-plugin to add async, defer, type="module", inline, and custom attributes to script elements, plus resource hints (preload/prefetch). Last version 2.1.5 works with webpack 4 and html-webpack-plugin 4.x. No longer maintained; does not support webpack 5. For webpack 5, consider alternatives like html-webpack-plugin's own script loading options or other plugins. Release cadence was irregular; now abandoned.

Common errors

error Uncaught Error: ScriptExtHtmlWebpackPlugin: you must configure html-webpack-plugin first ↓

cause HtmlWebpackPlugin is not instantiated before ScriptExtHtmlWebpackPlugin in the plugins array.

fix

Place HtmlWebpackPlugin before ScriptExtHtmlWebpackPlugin in the plugins array.

error ScriptExtHtmlWebpackPlugin is not a constructor ↓

cause Using named import instead of default import.

fix

Use the default import: import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin' or const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin').

error Cannot find module 'html-webpack-plugin' ↓

cause html-webpack-plugin is not installed as a dependency.

fix

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

Warnings

deprecated This project is no longer maintained and does not support webpack 5. ↓

fix Migrate to webpack 5 native features or alternative plugins (e.g., html-webpack-plugin's built-in script loading).

breaking Requires html-webpack-plugin v3.0.6+ or v4.x; older versions are incompatible. ↓

fix Upgrade html-webpack-plugin to v3.0.6+ or v4.x.

gotcha The plugin may conflict with other plugins that modify script tags (e.g., inline-source). ↓

fix Check plugin order; place ScriptExtHtmlWebpackPlugin last or after other script-modifying plugins.

breaking Webpack 4 requires html-webpack-plugin v4+; earlier combinations may fail. ↓

fix Use html-webpack-plugin v4+ with webpack 4.

gotcha The `inline` option only works for scripts that are not external or already inlined by other plugins. ↓

fix Ensure the script source is a chunk or asset that can be inlined (no crossorigin or integrity attributes).

Install

npm install script-ext-html-webpack-plugin

yarn add script-ext-html-webpack-plugin

pnpm add script-ext-html-webpack-plugin

Imports

default

wrong

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')

correct

import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin'

ESM import works; CommonJS require also works but default import is preferred in modern codebases.

ScriptExtHtmlWebpackPlugin

wrong

const { ScriptExtHtmlWebpackPlugin } = require('script-ext-html-webpack-plugin')

correct

const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')

This is a default export; named destructuring does not work.

HtmlWebpackPlugin

wrong

const HtmlWebpackPlugin = require('html-webpack-plugin').default

correct

import HtmlWebpackPlugin from 'html-webpack-plugin'

html-webpack-plugin also uses default export; ensure correct import style.

Quickstart

Webpack config using ScriptExtHtmlWebpackPlugin to set async/defer attributes, inline scripts, and add resource hints.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'My App' }),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer', // all scripts get defer
      inline: /inline.*\.js$/,   // inline scripts matching pattern
      prefetch: /lazy\.chunk\.js$/, // prefetch certain chunks
      preload: /initial.*\.js$/, // preload initial scripts
      module: /module.*\.js$/   // add type="module"
    })
  ]
};