vite 实现多页面打包,html模板插槽自动引入插件

前端项目开发中,多页面打包是常见需求,vite 原生支持多页面打包,但需要手动配置,本文介绍如何使用vite 实现多页面打包。 静态html并没有相互引用的功能,很多情况下,html界面的页首页脚是相同的。每个页面都引用相同的html代码,太冗余了,也不方便修改。下面基于viet插件,实现html模板插槽自动引入模板文件功能。 借鉴参考:blog.csdn.net/warmbook/ar...

vite 实现多页面打包

vite.config.js

配置多页面入口,与自定义的html模板插件

js 复制代码
import { defineConfig } from 'vite';
import { resolve } from 'path';
import myHtmlTemplatePlugin from './plugins/htmlTemplate';

export default defineConfig({
  plugins: [myHtmlTemplatePlugin()],
  build: {
    rollupOptions: {
      input: {
        index:resolve(__dirname, 'pages/index.html'),
        about:resolve(__dirname, 'pages/about.html')
      },
    },
  },
});

html 模板

index.html, about.html

js 复制代码
// 通用html 省略

//about.html
<div>about</div>
<script type="module" src="/src/about.ts"></script>

//index.html
<include src="./components/header.html"></include>
<div>index</div>
<include src="./components/footer.html"></include>
<script type="module" src="/src/index.ts"></script>

js文件

src/index.ts, src/about.ts

js 复制代码
//about.ts
import './style.css'
console.log('Hello Vite!','about.ts')

//index.ts
import './style.css'
console.log('Hello Vite!','index.ts')

打包

npm run build

js 复制代码
dist
├── assets
│   ├── 
│─ about.html
│─ index.html

htmlTemplate 插件,处理html插槽

在build/dev时处理html模板里的插槽数据,把插槽替换为对应的html文件。 plugins/htmlTemplate.ts

js 复制代码
import { Plugin } from 'vite';
import fs from 'fs'
import { dirname, join } from 'path'

function compressHTML(html) {
  // 去除注释
  html = html.replace(/<!--[\s\S]*?-->/g, "");
  // 去除多余空白
  html = html.replace(/\s+/g, " ");
  // 去除标签之间空格
  html = html.replace(/>\s+</g, "><");
  return html.trim();
}

export default function myHtmlTemplatePlugin(): Plugin {
  return {
    name: 'my-html-template-plugin',
    // vite特有钩子,填充html文件插槽
    transformIndexHtml:{
      enforce:'pre',
      async transform(html, ctx) {
        const directory = dirname(ctx.filename);
        html = html.replace(/\<include.*src="(.*)">.*\<\/include\>/gi, (match, p1, offset, string) => {
          const filePath = join(directory, p1);
          let inc_data = fs.readFileSync(filePath, 'utf8');
          return inc_data;
        });
        html = compressHTML(html);
        return { html, tags:[] };
    }}
  };
}
相关推荐
诗句藏于尽头1 分钟前
音乐播放器-单html文件
前端·html
歪歪1003 分钟前
ts-jest与其他TypeScript测试工具的对比
前端·javascript·测试工具·typescript·前端框架
CodeSheep7 分钟前
JetBrains官宣,又一个IDE可以免费用了!
前端·后端·程序员
刘新明19899 分钟前
Frida辅助分析OLLVM虚假控制流程(下)
java·开发语言·前端
江城开朗的豌豆26 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician31 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN66681 小时前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD1 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆1 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel1 小时前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js