Vite + Phaser 3 のテンプレートで複数のHTMLを作成する

やりたいこと

以下の記事で作成したVite + Phaser 3 のテンプレートで複数のHTMLをビルドの対象にします。

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

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

blog.marunokan.com

2024.08.10

具体的にはProjectディレクトリにあるindex.html以外のHTMLをビルド対象にして、npm run buildでビルドした際にhtmlをビルド、distフォルダにコピーされるようにします。

ここではProjectディレクトリにあるindexA.htmlを追加することを例にします。

設定の変更

以下のファイルを開きます。

vite¥config.prod.mjs

以下の内容になっていると思います。

import { defineConfig } from 'vite';

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

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

以下のインポートを追加します

import { resolve } from 'path'

続いて以下の中に

    build: {
        rollupOptions: {

ProjectディレクトリにあるindexA.htmlは追加でビルドする場合は、以下のプロパティを追加します。

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

全体は以下のようになります。

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',
//略

結果

npm run buildを行うことでindexA.htmlもビルドされdistに保存されるようになりました。