Creating multiple HTML files using Vite + Phaser 3 templates

Things I want to do

The Vite + Phaser 3 template created in the following article will be used to build multiple HTML files.

Vite + Phaser 3 + VisualStudioCodeの開発環境を作成する

やりたいことPhaser 3(Javascriptの２Dゲームエンジン)を使用するViteの環境を作成します。Viteが動作する環境(Node.jsなど)はインストール済みの前提です。テンプレートの使用あり...

blog.marunokan.com

2024.08.10

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

Here, we’ll use adding indexA.html located in the Project directory as an example.

Change settings

Open the following file.

vite¥config.prod.mjs

I believe it contains the following:

import { defineConfig } from 'vite';

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

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

Add the following imports:

import { resolve } from 'path'

Next, among the following

    build: {
        rollupOptions: {

If you are building an additional indexA.html file located in the Project directory, add the following properties:

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

The whole thing is as follows:

import { defineConfig } from 'vite';
import { resolve } from 'path' ///////追加

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

export default defineConfig({
    base: './',
    logLevel: 'warning',
    build: {
        rollupOptions: {
            input: {///////追加
                main: resolve(__dirname, '../index.html'),
                A: resolve(__dirname, '../indexA.html'),///追加するHtmlファイル
            },
            output: {
                manualChunks: {
                    phaser: ['phaser']
                }
            }
        },
        minify: 'terser',
//略

Result

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