or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-vite-plugin-html

A Vite plugin for HTML processing with template rendering, minification, and multi-page application support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-html@3.2.x

To install, run

npx @tessl/cli install tessl/npm-vite-plugin-html@3.2.0

index.mddocs/

Vite Plugin HTML

Vite Plugin HTML is a comprehensive Vite plugin that enhances HTML processing capabilities for modern web development workflows. It provides HTML compression using html-minifier-terser, EJS template processing with lodash.template syntax support, and multi-page application support for complex project configurations.

Package Information

  • Package Name: vite-plugin-html
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install vite-plugin-html -D
  • Peer Dependencies: Vite >=2.0.0

Core Imports

import { createHtmlPlugin } from "vite-plugin-html";

For CommonJS:

const { createHtmlPlugin } = require("vite-plugin-html");

Basic Usage

Single Page Application (SPA)

import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      entry: 'src/main.ts',
      template: 'public/index.html',
      inject: {
        data: {
          title: 'My App',
          injectScript: `<script src="./analytics.js"></script>`,
        },
        tags: [
          {
            injectTo: 'body-prepend',
            tag: 'div',
            attrs: {
              id: 'root',
            },
          },
        ],
      },
    }),
  ],
});

Multi-Page Application (MPA)

import { defineConfig } from 'vite';
import { createHtmlPlugin } from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true,
      pages: [
        {
          entry: 'src/main.ts',
          filename: 'index.html',
          template: 'public/index.html',
          injectOptions: {
            data: {
              title: 'Home Page',
            },
          },
        },
        {
          entry: 'src/admin.ts',
          filename: 'admin.html',
          template: 'public/admin.html',
          injectOptions: {
            data: {
              title: 'Admin Panel',
            },
          },
        },
      ],
    }),
  ],
});

Capabilities

Plugin Creation

Creates the main Vite plugin for HTML processing and minification.

function createHtmlPlugin(userOptions?: UserOptions): PluginOption[];

Parameters:

  • userOptions?: UserOptions - Configuration options for the plugin

Returns:

  • PluginOption[] - Array containing the HTML processing plugin and minification plugin

Configuration Types

UserOptions

Main configuration interface for the plugin.

interface UserOptions {
  /** Multi-page application configuration */
  pages?: Pages;
  /** HTML minification settings - boolean or detailed options */
  minify?: MinifyOptions | boolean;
  /** Default entry script path */
  entry?: string;
  /** Default template file path */
  template?: string;
  /** Default injection options */
  inject?: InjectOptions;
  /** Enable warning logs (default: false) */
  verbose?: boolean;
}

InjectOptions

Configuration for HTML content injection including EJS template data and HTML tags.

interface InjectOptions {
  /** Data injected into the HTML template using EJS */
  data?: Record<string, any>;
  /** HTML tags to inject at specified locations */
  tags?: HtmlTagDescriptor[];
  /** EJS template engine configuration options */
  ejsOptions?: EJSOptions;
}

PageOption

Configuration for individual pages in multi-page applications.

interface PageOption {
  /** Output HTML filename */
  filename: string;
  /** Template file path */
  template: string;
  /** Entry script path for this page */
  entry?: string;
  /** Injection options specific to this page */
  injectOptions?: InjectOptions;
}

Supporting Types

type Entry = string | Record<string, string>;
type Pages = PageOption[];

Re-exported Types:

  • EJSOptions - from 'ejs' package for template configuration
  • MinifyOptions - from 'html-minifier-terser' package for compression settings
  • HtmlTagDescriptor - from 'vite' package for HTML tag injection

Features

EJS Template Processing

The plugin processes HTML templates using EJS syntax with automatic environment variable injection:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title><%- title %></title>
  <%- injectScript %>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Environment Variable Injection

Environment variables from .env files are automatically injected into templates:

  • .env.${mode}.local
  • .env.${mode}
  • .env.local
  • .env

HTML Minification

Default minification settings when minify: true:

interface DefaultMinifyOptions {
  collapseWhitespace: true;
  keepClosingSlash: true;
  removeComments: true;
  removeRedundantAttributes: true;
  removeScriptTypeAttributes: true;
  removeStyleLinkTypeAttributes: true;
  useShortDoctype: true;
  minifyCSS: true;
}

Development Server Integration

The plugin integrates with Vite's development server to provide:

  • History API fallback for SPA routing
  • Multi-page route handling
  • Template processing during development
  • Hot module replacement support

Build Integration

During build, the plugin:

  • Processes HTML templates with injected data
  • Minifies HTML output (when enabled)
  • Handles multi-page build configurations
  • Manages entry point injection and cleanup
  • Organizes output files in the build directory

Error Handling

The plugin provides clear error messages for common issues:

  • Missing template files: throws descriptive error with file path
  • Invalid EJS syntax: passes through EJS error messages
  • Configuration conflicts: logs warnings when verbose mode is enabled

Platform Support

  • Node.js: >=12.0.0
  • Vite: >=2.0.0 (peer dependency)
  • Browsers: Supports all modern browsers through Vite's build process
  • Build Tools: Integrates with Vite's build pipeline and dev server