# vite-plugin-html
> A plugin for vite to Minimize index.html and use lodash.template template syntax in index.html
Latest version **3.2.2** (published 2024-01-17) · MIT license · 0 weekly downloads
## Install
```sh
npm install vite-plugin-html
pnpm add vite-plugin-html
yarn add vite-plugin-html
bun add vite-plugin-html
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.2.2 |
| Published | 2024-01-17 |
| First published | 2020-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 25.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 687 |
| Author | Vben |
| Maintainers | vvben |
| Keywords | vite, html, minify, vite-plugin |
## Links
- npm: https://www.npmjs.com/package/vite-plugin-html
- Repository: https://github.com/vbenjs/vite-plugin-html
- Homepage: https://github.com/vbenjs/vite-plugin-html/tree/master/#readme
- Issues: https://github.com/vbenjs/vite-plugin-html/issues
- npm.io page: https://npm.io/package/vite-plugin-html
## Dependencies (12)
- [ejs](https://npm.io/package/ejs.md) ^3.1.6
- [pathe](https://npm.io/package/pathe.md) ^0.2.0
- [dotenv](https://npm.io/package/dotenv.md) ^16.0.0
- [consola](https://npm.io/package/consola.md) ^2.15.3
- [fs-extra](https://npm.io/package/fs-extra.md) ^10.0.1
- [colorette](https://npm.io/package/colorette.md) ^2.0.16
- [fast-glob](https://npm.io/package/fast-glob.md) ^3.2.11
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) ^8.0.2
- [node-html-parser](https://npm.io/package/node-html-parser.md) ^5.3.3
- [@rollup/pluginutils](https://npm.io/package/@rollup/pluginutils.md) ^4.2.0
- [html-minifier-terser](https://npm.io/package/html-minifier-terser.md) ^6.1.0
- [connect-history-api-fallback](https://npm.io/package/connect-history-api-fallback.md) ^1.6.0
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 3.2.2 (latest) — 2024-01-17
- 3.2.1 — 2023-12-26
- 3.2.0 — 2022-03-15
- 3.1.0 — 2022-02-28
- 3.0.6 — 2022-02-10
- 3.0.5 — 2022-02-09
- 3.0.4 — 2022-02-07
- 3.0.3 — 2022-01-28
- 3.0.2 — 2022-01-27
- 3.0.1 — 2022-01-27
- 3.0.0 — 2022-01-27
- 3.0.0-beta.4 — 2022-01-27
- 3.0.0-beta.3 — 2022-01-27
- 2.1.2 — 2021-12-27
- 2.1.1 — 2021-09-27
- … 20 more at https://npm.io/package/vite-plugin-html/versions
## README
# vite-plugin-html
**English** | [中文](./README.zh_CN.md)
## Features
- HTML compression capability
- EJS template capability
- Multi-page application support
- Support custom `entry`
- Support custom `template`
## Install (yarn or npm)
**node version:** >=12.0.0
**vite version:** >=2.0.0
```bash
yarn add vite-plugin-html -D
```
或
```bash
npm i vite-plugin-html -D
```
## Usage
- Add EJS tags to `index.html`, e.g.
```html
<%- title %>
<%- injectScript %>
```
- Configure in `vite.config.ts`, this method can introduce the required functions as needed
```ts
import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
vue(),
createHtmlPlugin({
minify: true,
/**
* After writing entry here, you will not need to add script tags in `index.html`, the original tags need to be deleted
* @default src/main.ts
*/
entry: 'src/main.ts',
/**
* If you want to store `index.html` in the specified folder, you can modify it, otherwise no configuration is required
* @default index.html
*/
template: 'public/index.html',
/**
* Data that needs to be injected into the index.html ejs template
*/
inject: {
data: {
title: 'index',
injectScript: ``,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag',
},
},
],
},
}),
],
})
```
Multi-page application configuration
```ts
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: 'index',
injectScript: ``,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag1',
},
},
],
},
},
{
entry: 'src/other-main.ts',
filename: 'other.html',
template: 'public/other.html',
injectOptions: {
data: {
title: 'other page',
injectScript: ``,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag2',
},
},
],
},
},
],
}),
],
})
```
## Parameter Description
`createHtmlPlugin(options: UserOptions)`
### UserOptions
| Parameter | Types | Default | Description |
| --------- | ------------------------ | ------------- | ------------------------------------------------- |
| entry | `string` | `src/main.ts` | entry file path |
| template | `string` | `index.html` | relative path to the template |
| inject | `InjectOptions` | - | Data injected into HTML |
| minify | `boolean｜MinifyOptions` | - | whether to compress html |
| pages | `PageOption` | - | Multi-page configuration |
### InjectOptions
| Parameter | Types | Default | Description |
| ---------- | --------------------- | ------- | ------------------------------------------------------------------------- |
| data | `Record` | - | injected data |
| ejsOptions | `EJSOptions` | - | ejs configuration Options[EJSOptions](https://github.com/mde/ejs#options) |
| tags | `HtmlTagDescriptor` | - | List of tags to inject |
`data` can be accessed in `html` using the `ejs` template syntax
#### Env inject
By default, the contents of the `.env` file will be injected into index.html, similar to vite's `loadEnv` function
### PageOption
| Parameter | Types | Default | Description |
| ------------- | --------------- | ------------- | ----------------------------- |
| filename | `string` | - | html file name |
| template | `string` | `index.html` | relative path to the template |
| entry | `string` | `src/main.ts` | entry file path |
| injectOptions | `InjectOptions` | - | Data injected into HTML |
### MinifyOptions
Default compression configuration
```ts
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
minifyCSS: true,
```
### Run the playground
```bash
pnpm install
# spa
cd ./packages/playground/basic
pnpm run dev
# map
cd ./packages/playground/mpa
pnpm run dev
```
## Example project
[Vben Admin](https://github.com/anncwb/vue-vben-admin)
## License
MIT
[npm-img]: https://img.shields.io/npm/v/vite-plugin-html.svg
[npm-url]: https://npmjs.com/package/vite-plugin-html
[node-img]: https://img.shields.io/node/v/vite-plugin-html.svg
[node-url]: https://nodejs.org/en/about/releases/
---
_Source: https://npm.io/package/vite-plugin-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._