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

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Script Extension for HTML Webpack Plugin

Name: tessl/npm-script-ext-html-webpack-plugin
Author: tessl

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;