vite-plugin-xq-multi-input

A vite auto config multi html input plugin.

一个Vite自动配置多个Html入口的插件。 主用适用于Bootstrap等传统的网页开发，使得传统网页开发也可以使用vite进行开发，也省去配置多个HTML入口的麻烦。

安装

1
2npm i -D vite-plugin-xq-multi-input
3

使用

Add plugin to your vite.config.ts: 在vite.config.ts引入插件：

1// vite.config.ts
2import { defineConfig } from 'vite';
3import xqMultiInput from 'vite-plugin-xq-multi-input';
4export default defineConfig({
5  plugins: [
6    xqMultiInput()
7  ],
8}

工作原理

配置示例：

1import { defineConfig } from 'vite'
2import { resolve } from 'path'
3import xqMultiInput from 'vite-plugin-xq-multi-input'
4export default defineConfig({
5    plugins:[
6        xqMultiInput()
7    ],
8    build: {
9        rollupOptions: {
10            input: {
11                pc: resolve(__dirname, 'pc/index.html'),
12                mobile: resolve(__dirname, 'mobile/index.html')
13            }
14        }
15    }
16    
17})

该配置有两个入口pc和mobile，插件将自动读取pc和mobile入口的目录，读取目录下其他的html文件并自动添加到input配置中，以完成自动配置其他HTML入口。

插件执行后会自动修改配置，然后再进行编译。

1build: {
2    rollupOptions: {
3        input: {
4            pc: index.html完整路径,
5            pc_user:user.html完整路径，
6            pc_product:product.html完整路径,
7            其他相关的html文件配置，
8            mobile: index.html完整路径,
9            mobile_user:user.html完整路径，
10            mobile_product:product.html完整路径,
11            其他相关的html文件配置，
12        }
13    }
14}