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?