CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vite-plugin-html

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

—

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

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
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vite-plugin-html@3.2.x
Publish Source
CLI
Badge
tessl/npm-vite-plugin-html badge