@zippybee/plugin-html
Advanced tools
A plugin for vite to Minimize index.html and use lodash.template template syntax in index.html
entrytemplatenode version: >=12.0.0
vite version: >=2.0.0
yarn add vite-plugin-html -D
或
npm i vite-plugin-html -D
index.html 中增加 EJS 标签，例如<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- title %></title>
<%- injectScript %>
</head>
vite.config.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,
/**
* 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
* @default src/main.ts
*/
entry: 'src/main.ts',
/**
* 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
* @default index.html
*/
template: 'public/index.html',
/**
* 需要注入 index.html ejs 模版的数据
*/
inject: {
data: {
title: 'index',
injectScript: `<script src="./inject.js"></script>`,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag',
},
},
],
},
}),
],
});
多页应用配置
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: `<script src="./inject.js"></script>`,
},
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: `<script src="./inject.js"></script>`,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag2',
},
},
],
},
},
],
}),
],
});
createHtmlPlugin(options: UserOptions)
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| entry | string | src/main.ts | 入口文件 |
| template | string | index.html | 模板的相对路径 |
| inject | InjectOptions | - | 注入 HTML 的数据 |
| minify | boolean｜MinifyOptions | - | 是否压缩 html |
| pages | PageOption | - | 多页配置 |
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data | Record<string, any> | - | 注入的数据 |
| ejsOptions | EJSOptions | - | ejs 配置项EJSOptions |
| tags | HtmlTagDescriptor | - | 需要注入的标签列表 |
data 可以在 html 中使用 ejs 模版语法获取
默认会向 index.html 注入 .env 文件的内容，类似 vite 的 loadEnv函数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| filename | string | - | html 文件名 |
| template | string | index.html | 模板的相对路径 |
| entry | string | src/main.ts | 入口文件 |
| injectOptions | InjectOptions | - | 注入 HTML 的数据 |
默认压缩配置
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
minifyCSS: true,
pnpm install
# spa
cd ./packages/playground/basic
pnpm run dev
# map
cd ./packages/playground/mpa
pnpm run dev
本插件fork自vben 大佬开发的 vite-plgin-html 针对此插件做了兼容vite>=5.0的更新
MIT
FAQs
A plugin for vite to Minimize index.html and use lodash.template template syntax in index.html
We found that @zippybee/plugin-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket detected malicious node-ipc versions with obfuscated stealer/backdoor behavior in a developing npm supply chain attack.
Security News
TeamPCP and BreachForums are promoting a Shai-Hulud supply chain attack contest with a $1,000 prize for the biggest package compromise.
Security News
Packagist urges PHP projects to update Composer after a GitHub token format change exposed some GitHub Actions tokens in CI logs.