vite-plugin-generate-html

0.2.3 verified Mon Apr 27 auth: no javascript

A Vite plugin (v0.2.3) that generates separate HTML files containing <script> and <link> tags for JavaScript and CSS bundles respectively, inspired by Webpack's HtmlWebpackPlugin. Supports custom attributes for script/link elements, multiple entry points, and filtering via 'chunks'. Ideal for projects needing dynamic injection of hashed bundle references into views like .cshtml or .php. Ships TypeScript types. Released infrequently (last update Nov 2022). Differentiator: lightweight and focused on generating only the tags, not a full HTML page.

Common errors

error Cannot find module 'vite-plugin-generate-html' ↓

cause Package not installed or incorrect import path.

fix

Run npm install --save-dev vite-plugin-generate-html and use correct import statement.

error TypeError: VitePluginGenerateHtmlFiles is not a function ↓

cause Using named import instead of default import.

fix

Use import VitePluginGenerateHtmlFiles from 'vite-plugin-generate-html' (no curly braces).

error Error: [vite-plugin-generate-html] The 'output' parameter must be an array when specified. ↓

cause Providing `output` as an object instead of an array.

fix

Wrap the output object in an array: output: [{ main: { attrs: [...], linkAttrs: [...] } }]

Warnings

gotcha If `output` is used, all entry points must be defined in the output array unless filtered with `chunks`. ↓

fix Define an output entry for each entry point or use the `chunks` parameter to limit which entries are processed.

gotcha The plugin does not generate a full HTML file; it only writes <script> and <link> tags to the specified files. ↓

fix Integrate the generated tags into your own HTML template or server-side view.

breaking In v0.2.0, the plugin changed to support multiple entry points; the `output` parameter was introduced and the single file parameters changed. ↓

fix Update configuration: if using multiple entries, use `output` array and `chunks` filter.

deprecated No deprecations reported. ↓

fix N/A

Install

npm install vite-plugin-generate-html

yarn add vite-plugin-generate-html

pnpm add vite-plugin-generate-html

Imports

default

wrong

import { VitePluginGenerateHtmlFiles } from 'vite-plugin-generate-html'

correct

import VitePluginGenerateHtmlFiles from 'vite-plugin-generate-html'

Default export only; named export does not exist.

VitePluginGenerateHtmlFiles

wrong

const VitePluginGenerateHtmlFiles = require('vite-plugin-generate-html')

correct

import VitePluginGenerateHtmlFiles from 'vite-plugin-generate-html'

ESM-only; CJS require will fail.

Quickstart

Basic setup: generates separate HTML files for JS and CSS bundle references, using default attributes.

import { resolve as pathResolve } from 'path';
import { defineConfig } from 'vite';
import VitePluginGenerateHtmlFiles from 'vite-plugin-generate-html';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        app: pathResolve(__dirname, 'src/main.ts'),
      },
    },
  },
  plugins: [
    VitePluginGenerateHtmlFiles({
      publicDir: '/dist/',
      jsEntryFile: pathResolve(__dirname, '../some/dir/javascript.html'),
      cssEntryFile: pathResolve(__dirname, '../some/dir/css.html'),
    }),
  ],
});