CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-html-loader

Webpack loader for processing HTML files with asset handling and minification capabilities

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

minification.mddocs/

HTML Minification

HTML Loader provides built-in HTML minification capabilities using html-minifier-terser, with automatic production mode detection and extensive configuration options.

Capabilities

Minification Configuration

Control HTML minification behavior through boolean or detailed options.

/**
 * Configure HTML minification
 * @param minimize - Boolean to enable/disable with defaults, or detailed configuration object
 */
interface MinimizeOptions {
  /** Treat attributes in case sensitive manner */
  caseSensitive?: boolean;
  /** Collapse white space that contributes to text nodes in a document tree */
  collapseWhitespace?: boolean;
  /** Always collapse to 1 space (never remove it entirely) */
  conservativeCollapse?: boolean;
  /** Keep the trailing slash on singleton elements */
  keepClosingSlash?: boolean;
  /** Minify CSS in style elements and style attributes */
  minifyCSS?: boolean;
  /** Minify JavaScript in script elements and event attributes */
  minifyJS?: boolean;
  /** Strip HTML comments */
  removeComments?: boolean;
  /** Remove attributes when value matches default */
  removeRedundantAttributes?: boolean;
  /** Remove type="text/javascript" from script tags */
  removeScriptTypeAttributes?: boolean;
  /** Remove type="text/css" from style and link tags */
  removeStyleLinkTypeAttributes?: boolean;
}

Default Minimizer Options

Access the default minification configuration used by html-loader.

/**
 * Default options object for HTML minification
 * These are the options applied when minimize: true
 */
const defaultMinimizerOptions: MinimizeOptions;

// Actual default values:
const defaultMinimizerOptions = {
  caseSensitive: true,
  collapseWhitespace: true,
  conservativeCollapse: true,
  keepClosingSlash: true,
  minifyCSS: true,
  minifyJS: true,
  removeComments: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true
};

Usage Examples:

// Import default options
const { defaultMinimizerOptions } = require("html-loader");

// Use defaults in webpack config
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: true // Uses defaultMinimizerOptions
  }
}

// Extend defaults with custom options
{
  test: /\.html$/i,
  loader: "html-loader", 
  options: {
    minimize: {
      ...defaultMinimizerOptions,
      removeComments: false,
      collapseWhitespace: false
    }
  }
}

Automatic Production Mode

Minification is automatically enabled in webpack production mode.

/**
 * Automatic minification behavior based on webpack mode
 * - Production mode: minimize defaults to defaultMinimizerOptions
 * - Development mode: minimize defaults to false
 * - No mode specified: treated as production, minimize defaults to defaultMinimizerOptions
 */

Configuration Examples:

// Minification automatically enabled in production
module.exports = {
  mode: 'production', // or no mode specified
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader"
        // minimize option not needed - automatically enabled
      }
    ]
  }
};

// Explicitly disable in production
module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: false
        }
      }
    ]
  }
};

// Explicitly enable in development
module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          minimize: true
        }
      }
    ]
  }
};

Custom Minification Options

Override specific minification behaviors while maintaining others.

/**
 * Custom minification configuration examples
 */

Common Customizations:

// Preserve comments
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      removeComments: false
    }
  }
}

// Preserve whitespace
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      collapseWhitespace: false,
      conservativeCollapse: false
    }
  }
}

// Disable CSS/JS minification (handle with separate loaders)
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      minifyCSS: false,
      minifyJS: false
    }
  }
}

// XHTML-compatible settings
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      keepClosingSlash: true,
      caseSensitive: true,
      removeRedundantAttributes: false
    }
  }
}

// Conservative minification (minimal changes)
{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      collapseWhitespace: true,
      conservativeCollapse: true,
      keepClosingSlash: true,
      removeComments: true,
      // Disable potentially breaking optimizations
      removeRedundantAttributes: false,
      removeScriptTypeAttributes: false,
      removeStyleLinkTypeAttributes: false,
      minifyCSS: false,
      minifyJS: false
    }
  }
}

Minification Safety Considerations

Understanding which options are safe to use in different contexts.

/**
 * Safety guidelines for minification options
 */

Safe Options (Generally recommended):

  • removeComments: true - Safe unless comments are functionally important
  • collapseWhitespace: true - Safe for most HTML
  • conservativeCollapse: true - Safer than aggressive whitespace removal
  • keepClosingSlash: true - Required for XHTML compatibility

Use with Caution:

  • removeRedundantAttributes: false - Can affect CSS selectors and scripting behavior
  • removeEmptyAttributes: false - Can affect styling and JavaScript behavior
  • caseSensitive: true - Required for XML/XHTML, may cause issues with legacy HTML

Advanced Options:

  • minifyCSS: true - Generally safe, uses cssnano internally
  • minifyJS: true - Generally safe, uses UglifyJS internally
  • minifyURLs: false - Disabled by default as base URL cannot be guaranteed

Example Safe Production Configuration:

{
  test: /\.html$/i,
  loader: "html-loader",
  options: {
    minimize: {
      caseSensitive: true,
      collapseWhitespace: true,
      conservativeCollapse: true,
      keepClosingSlash: true,
      minifyCSS: true,
      minifyJS: true,
      removeComments: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      // Explicitly avoid potentially breaking options
      removeRedundantAttributes: false,
      removeEmptyAttributes: false,
      minifyURLs: false
    }
  }
}

Integration with html-minifier-terser

HTML Loader uses html-minifier-terser internally for minification.

/**
 * All html-minifier-terser options are supported
 * See: https://github.com/DanielRuf/html-minifier-terser#options-quick-reference
 */

Complete Option Reference:

All options from html-minifier-terser are supported, including:

  • collapseBooleanAttributes
  • collapseInlineTagWhitespace
  • collapseWhitespace
  • conservativeCollapse
  • continueOnParseError
  • customAttrAssign
  • customAttrCollapse
  • customAttrSurround
  • customEventAttributes
  • decodeEntities
  • html5
  • ignoreCustomComments
  • ignoreCustomFragments
  • includeAutoGeneratedTags
  • keepClosingSlash
  • maxLineLength
  • minifyCSS
  • minifyJS
  • minifyURLs
  • preserveLineBreaks
  • preventAttributesEscaping
  • processConditionalComments
  • processScripts
  • quoteCharacter
  • removeAttributeQuotes
  • removeComments
  • removeEmptyAttributes
  • removeEmptyElements
  • removeOptionalTags
  • removeRedundantAttributes
  • removeScriptTypeAttributes
  • removeStyleLinkTypeAttributes
  • removeTagWhitespace
  • sortAttributes
  • sortClassName
  • trimCustomFragments
  • useShortDoctype

Refer to the html-minifier-terser documentation for detailed descriptions of each option.

docs

asset-processing.md

content-processing.md

index.md

minification.md

runtime-utilities.md

tile.json