Creating multiple HTML files with a Vite + Phaser 3 template.

The purpose 

This Vite + Phaser 3 template, created from the article below, will be configured to build multiple HTML files.

Setting up a development environment for Vite + Phaser 3 + Visual Studio Code

The purpose This guide describes setting up a Vite environment using Phaser 3, a 2D game engine for Javascript. ...

blog.en.marunokan.com

2024.08.10

Specifically, we’ll configure the build process so that all HTML files in the Project directory except index.html are built and copied to the dist folder when running npm run build.

For this example, we’ll add indexA.html located in the Project directory.

Modify setting

Open below file.

vite¥config.prod.mjs

contents is

import { defineConfig } from 'vite';

const phasermsg = () => {
 //略
}   

export default defineConfig({
    base: './',
    logLevel: 'warning',
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    phaser: ['phaser']
                }
            }
        },
        minify: 'terser',
//略

add following import

import { resolve } from 'path'

Next, modify in below

    build: {
        rollupOptions: {

To build indexA.html in the Project directory, add the following properties.

            input: {
                main: resolve(__dirname, '../index.html'),
                A: resolve(__dirname, '../indexA.html'),///追加するHtmlファイル
            },

The complete picture is as follows

import { defineConfig } from 'vite';
import { resolve } from 'path' ///////add

const phasermsg = () => {
 //略
}   

export default defineConfig({
    base: './',
    logLevel: 'warning',
    build: {
        rollupOptions: {
            input: {///////add
                main: resolve(__dirname, '../index.html'),
                A: resolve(__dirname, '../indexA.html'),///add HTML file
            },
            output: {
                manualChunks: {
                    phaser: ['phaser']
                }
            }
        },
        minify: 'terser',
//...omitted

Result

Running npm run build now also builds indexA.html and saves it to the dist directory.