vite-plugin-html

What is vite-plugin-html?

vite-plugin-html is a plugin for Vite that allows you to inject data into your HTML files, modify HTML templates, and perform other HTML-related tasks during the build process.

What are vite-plugin-html's main functionalities?

Inject Data into HTML

This feature allows you to inject data into your HTML templates. In this example, the title and description are injected into the HTML file.

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

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          title: 'My Vite App',
          description: 'This is a description for my Vite app.'
        }
      }
    })
  ]
});

Minify HTML

This feature enables HTML minification during the build process. Setting `minify` to true will minify the HTML output.

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

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      minify: true
    })
  ]
});

Custom HTML Template

This feature allows you to specify a custom HTML template file. In this example, the custom template located at `src/custom-template.html` is used.

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

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      template: 'src/custom-template.html'
    })
  ]
});

Other packages similar to vite-plugin-html

html-webpack-plugin

html-webpack-plugin is a popular plugin for Webpack that simplifies the creation of HTML files to serve your bundles. It offers similar functionalities such as injecting data, minifying HTML, and using custom templates. However, it is designed specifically for Webpack, whereas vite-plugin-html is tailored for Vite.

rollup-plugin-html

rollup-plugin-html is a plugin for Rollup that allows you to import HTML files as strings and perform various HTML manipulations. While it provides some similar functionalities like injecting data and using custom templates, it is designed for Rollup rather than Vite.

README

The README file is missing