or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

asset-processing.mdcontent-processing.mdindex.mdminification.mdruntime-utilities.md
tile.json

tessl/npm-html-loader

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/html-loader@5.1.x

To install, run

npx @tessl/cli install tessl/npm-html-loader@5.1.0

index.mddocs/

HTML Loader

HTML Loader is a webpack loader that processes HTML files by importing referenced assets, minifying content, and generating JavaScript modules. It automatically handles HTML attributes like src, href, and srcset to integrate images, stylesheets, scripts, and other assets into the webpack build process.

Package Information

  • Package Name: html-loader
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install --save-dev html-loader

Core Imports

The html-loader is configured in webpack and doesn't export functions for direct import. Instead, it provides configuration options and utilities:

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

For webpack configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
      },
    ],
  },
};

Basic Usage

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: true,
          minimize: true,
        },
      },
    ],
  },
};
<!-- template.html -->
<div>
  <img src="./image.png" alt="Example" />
  <link rel="stylesheet" href="./styles.css" />
</div>
// main.js
import html from "./template.html";
console.log(html); // HTML string with processed asset URLs

Architecture

HTML Loader operates through several key components:

  • Webpack Loader Interface: Main processing function that handles HTML content transformation
  • Sources Plugin: Configurable HTML attribute processing for asset detection and import generation
  • Minimizer Plugin: HTML minification using html-minifier-terser with customizable options
  • Runtime Utilities: Helper functions for URL processing and code generation
  • Options Validation: Schema-based validation of loader configuration options
  • Error Handling: Custom error reporting with source position information

Capabilities

HTML Asset Processing

Automatically processes HTML attributes to import assets through webpack's module system. Supports extensive customization of which elements and attributes to process.

// Webpack loader configuration options
interface LoaderOptions {
  sources?: boolean | SourcesOptions;
  minimize?: boolean | MinimizeOptions;
  esModule?: boolean;
  preprocessor?: (content: string, loaderContext: LoaderContext) => string | Promise<string>;
  postprocessor?: (content: string, loaderContext: LoaderContext) => string | Promise<string>;
}

interface SourcesOptions {
  list?: SourceDefinition[];
  urlFilter?: (attribute: string, value: string, resourcePath: string) => boolean;
  scriptingEnabled?: boolean;
}

interface SourceDefinition {
  tag?: string;
  attribute?: string;
  type: "src" | "srcset";
  filter?: (tag: string, attribute: string, attributes: string, resourcePath: string) => boolean;
}

Asset Processing

HTML Minification

Built-in HTML minification with extensive configuration options using html-minifier-terser. Automatically enabled in production mode with sensible defaults.

interface MinimizeOptions {
  caseSensitive?: boolean;
  collapseWhitespace?: boolean;
  conservativeCollapse?: boolean;
  keepClosingSlash?: boolean;
  minifyCSS?: boolean;
  minifyJS?: boolean;
  removeComments?: boolean;
  removeRedundantAttributes?: boolean;
  removeScriptTypeAttributes?: boolean;
  removeStyleLinkTypeAttributes?: boolean;
}

// Access default options
const defaultMinimizerOptions: MinimizeOptions;

Minification

Content Processing

Pre and post-processing hooks for custom HTML transformations, enabling integration with template engines and other processing tools.

type PreprocessorFunction = (
  content: string,
  loaderContext: LoaderContext
) => string | Promise<string>;

type PostprocessorFunction = (
  content: string,
  loaderContext: LoaderContext
) => string | Promise<string>;

Content Processing

Runtime Utilities

Helper functions and utilities used at runtime for URL processing and asset handling.

/**
 * Runtime helper for URL processing with optional quote handling
 * @param url - The URL to process
 * @param maybeNeedQuotes - Whether quotes might be needed for the URL
 * @returns Processed URL string, optionally wrapped in quotes
 */
function getUrl(url: string, maybeNeedQuotes?: boolean): string;

Runtime Utilities

Types

interface LoaderContext {
  resourcePath: string;
  context: string;
  mode?: string;
  emitError: (error: Error) => void;
  getOptions: (schema?: object) => any;
}

class HtmlSourceError extends Error {
  constructor(error: string, startOffset: number, endOffset: number, source: string);
  name: "HtmlSourceError";
  message: string; // Enhanced with position information (line, column)
  startOffset: number;
  endOffset: number;
  source: string;
  stack: false; // Stack trace is disabled for cleaner output
}