or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

custom-attributes.mdindex.mdplugin-configuration.mdresource-hints.mdscript-attributes.mdscript-inlining.md
tile.json

tessl/npm-script-ext-html-webpack-plugin

Enhances html-webpack-plugin functionality with async and defer attributes for script elements

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/script-ext-html-webpack-plugin@2.1.x

To install, run

npx @tessl/cli install tessl/npm-script-ext-html-webpack-plugin@2.1.0

index.mddocs/

Script Extension for HTML Webpack Plugin

Script Extension for HTML Webpack Plugin is a webpack plugin that enhances html-webpack-plugin functionality by providing advanced script tag configuration options. It enables developers to add async, defer, and module attributes to script elements, supports script inlining, and provides resource hints (preload/prefetch) for optimizing JavaScript loading strategies.

Package Information

  • Package Name: script-ext-html-webpack-plugin
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev script-ext-html-webpack-plugin

Core Imports

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

Note: This package uses CommonJS exports and does not support ES6 import syntax.

Basic Usage

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

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(),
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'async'
    })
  ]
};

Important: The plugin must be placed after HtmlWebpackPlugin in the plugins array.

Architecture

Script Extension for HTML Webpack Plugin is built around several key components:

  • Plugin Class: Main ScriptExtHtmlWebpackPlugin class that integrates with webpack's plugin system
  • Configuration System: Normalizes and validates plugin options with sensible defaults
  • Element Processing: Modifies script elements based on configured patterns and attributes
  • Resource Hints: Generates preload/prefetch link tags for performance optimization
  • Asset Management: Handles inlined script assets and cleanup during webpack emit phase

Capabilities

Plugin Configuration

Core plugin class and configuration options for controlling script element processing behavior.

class ScriptExtHtmlWebpackPlugin {
  constructor(options?: PluginOptions);
  apply(compiler: object): void;
}

interface PluginOptions {
  async?: PatternConfig;
  defer?: PatternConfig;
  sync?: PatternConfig;
  module?: PatternConfig;
  inline?: PatternConfig;
  preload?: ResourceHintConfig;
  prefetch?: ResourceHintConfig;
  defaultAttribute?: 'sync' | 'async' | 'defer';
  removeInlinedAssets?: boolean;
  custom?: CustomAttributeConfig[];
}

Plugin Configuration

Script Attributes

Apply standard HTML script attributes (async, defer, module) to webpack-generated script tags based on configurable patterns.

// Pattern matching for script attribute assignment
type PatternConfig = string | RegExp | Array<string | RegExp> | {
  test: string | RegExp | Array<string | RegExp>;
};

Script Attributes

Script Inlining

Inline script content directly into HTML instead of generating separate files, with automatic asset cleanup.

interface InlineConfig {
  test: string | RegExp | Array<string | RegExp>;
}

Script Inlining

Resource Hints

Generate preload and prefetch link tags for initial and dynamically loaded scripts to optimize loading performance.

interface ResourceHintConfig {
  test: string | RegExp | Array<string | RegExp>;
  chunks?: 'initial' | 'async' | 'all';
}

Resource Hints

Custom Attributes

Add arbitrary custom attributes to script elements for specialized use cases like CORS, CSP, or custom loading behavior.

interface CustomAttributeConfig {
  test: string | RegExp | Array<string | RegExp>;
  attribute: string;
  value?: any;
}

Custom Attributes

Types

Core Types

/**
 * Base pattern matching configuration
 */
interface PatternConfig {
  test: string | RegExp | Array<string | RegExp>;
}

/**
 * Resource hint configuration with chunk targeting
 */
interface ResourceHintConfig extends PatternConfig {
  chunks?: 'initial' | 'async' | 'all';
}

/**
 * Custom attribute configuration
 */
interface CustomAttributeConfig extends PatternConfig {
  attribute: string;
  value?: any;
}

/**
 * Complete plugin options interface
 */
interface PluginOptions {
  async?: PatternConfig;
  defer?: PatternConfig;
  sync?: PatternConfig;  
  module?: PatternConfig;
  inline?: PatternConfig;
  preload?: ResourceHintConfig;
  prefetch?: ResourceHintConfig;
  defaultAttribute?: 'sync' | 'async' | 'defer';
  removeInlinedAssets?: boolean;
  custom?: CustomAttributeConfig[];
}

/**
 * Pattern matching implementation details
 */
function matches(scriptName: string, patterns: Array<string | RegExp>): boolean;