htmlWebPackPlugin EJS to vite-plugin-html

[DanielRuf]

Coming from a setup with Vue CLI and webpack to Vite, the following template is not transformed:

<%
for (let i = 0; i < htmlWebpackPlugin.files.js.length; i++) {
    const file = htmlWebpackPlugin.files.js[i];
    if (!file.match(/mainCss.*\.js/)) {
%>
        <script src="/<%= file %>"></script>
<%
    }
}
%>

The old vue.config.js file:

/* jshint node: true, esversion: 6 */

const path = require('path');
const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;

module.exports = () => {
    const watch = process.env.npm_lifecycle_event === 'watch';
    const production = process.env.NODE_ENV === 'production';
    const config = {
        runtimeCompiler: true,
        outputDir: '../public/dist',
        publicPath: production || watch ? 'dist/' : '',
        configureWebpack: config => {
            config.entry.main =  './src/main.js';
            if (production) {
                config.plugins.push(new LicenseWebpackPlugin({
                    perChunkOutput: false,
                    skipChildCompilers: true,
                }));
            }
            config.performance = {
                hints: production ? false : 'warning'
            };
            config.devtool = production ? 'source-map' : 'eval-source-map';
        },
    };
    if (production || watch) {
        config.pages = {
            main: {
                filename: path.resolve(__dirname, '../public/dist/js.html'),
                template: 'public/js.html',
                entry: 'src/main.js',
                inject: false,
            },
            mainCss: {
                filename: path.resolve(__dirname, '../public/dist/css.html'),
                template: 'public/css.html',
                entry: 'src/main.js',
                inject: false,
            },
        };
    }
    return config;
};

The new vite.config.js file:

/* jshint node: true, esversion: 6 */

import path from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        createHtmlPlugin({pages: [
                {
                    filename: path.resolve(__dirname, '../public/dist/js.html'),
                    template: 'public/js.html',
                    entry: 'src/main.js',
                    inject: false,
                },
                {
                    filename: path.resolve(__dirname, '../public/dist/css.html'),
                    template: 'public/css.html',
                    entry: 'src/main.js',
                    inject: false,
                }
            ]})
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "./src"),
        },
    },
});

What steps are needed to get the asset injection working with this new plugin?