Настройка проекта с Webpack и Vite

Phaser — популярная библиотека для создания 2D-игр на JavaScript, которая требует грамотной организации проекта для масштабируемости и удобного управления ресурсами. Использование сборщиков вроде Webpack позволяет эффективно работать с модулями, ассетами и автоматическим обновлением кода.

Установка и структура проекта

Создание нового проекта начинается с инициализации npm-пакета:

mkdir phaser-webpack
cd phaser-webpack
npm init -y

Устанавливаются основные зависимости:

npm install phaser
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env html-webpack-plugin css-loader style-loader

Рекомендуемая структура проекта:

phaser-webpack/
├─ src/
│  ├─ index.js
│  ├─ scenes/
│  │  ├─ BootScene.js
│  │  ├─ MainScene.js
│  ├─ assets/
│  │  ├─ images/
│  │  └─ audio/
├─ dist/
├─ package.json
└─ webpack.config.js

Конфигурация Webpack

Основная задача Webpack — собрать весь код в один или несколько бандлов, управлять ресурсами и поддерживать горячую перезагрузку.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  mode: 'development',
  devServer: {
    static: './dist',
    hot: true,
    open: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|gif|mp3|wav)$/,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  resolve: {
    extensions: ['.js']
  }
};

Ключевые моменты конфигурации:

  • entry — точка входа, обычно index.js.
  • output — настройки для бандла.
  • devServer — обеспечивает live reload.
  • module.rules — обрабатывает JS через Babel, CSS и ассеты.
  • HtmlWebpackPlugin — автоматически вставляет <script> в HTML.

Пример начального кода Phaser

src/index.js:

import Phaser from 'phaser';
import BootScene from './scenes/BootScene';
import MainScene from './scenes/MainScene';

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [BootScene, MainScene],
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    }
};

new Phaser.Game(config);

src/scenes/BootScene.js:

import Phaser from 'phaser';

export default class BootScene extends Phaser.Scene {
    constructor() {
        super({ key: 'BootScene' });
    }

    preload() {
        this.load.image('sky', 'assets/images/sky.png');
    }

    create() {
        this.scene.start('MainScene');
    }
}

src/scenes/MainScene.js:

import Phaser from 'phaser';

export default class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
    }

    create() {
        this.add.image(400, 300, 'sky');
    }
}

Настройка проекта Phaser с Vite

Vite обеспечивает более быстрый запуск и сборку за счет нативного ES-модулей и технологии hot module replacement (HMR).

Установка и структура проекта

npm create vite@latest phaser-vite -- --template vanilla
cd phaser-vite
npm install
npm install phaser

Структура проекта:

phaser-vite/
├─ index.html
├─ src/
│  ├─ main.js
│  ├─ scenes/
│  │  ├─ BootScene.js
│  │  └─ MainScene.js
│  └─ assets/
│     ├─ images/
│     └─ audio/
├─ package.json
└─ vite.config.js

Конфигурация Vite

Файл vite.config.js:

import { defineConfig } from 'vite';

export default defineConfig({
  root: './',
  base: './',
  server: {
    open: true,
    port: 3000
  },
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: '/index.html'
    }
  }
});

Пример кода Phaser с Vite

src/main.js:

import Phaser from 'phaser';
import BootScene from './scenes/BootScene';
import MainScene from './scenes/MainScene';

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [BootScene, MainScene],
    physics: {
        default: 'arcade',
        arcade: { gravity: { y: 300 }, debug: false }
    }
};

new Phaser.Game(config);

Сцены создаются аналогично примеру с Webpack. Отличие Vite — мгновенная перезагрузка при изменении кода без полной пересборки.

Особенности работы с ассетами

  • Webpack использует asset/resource для генерации файлов в dist.
  • Vite работает с ассетами через прямой импорт или ссылку относительно папки public.
  • В обоих случаях важно использовать относительные пути и правильное именование ресурсов.

Сравнение Webpack и Vite для Phaser

Характеристика Webpack Vite
Скорость разработки Медленнее из-за бандла Быстрее, HMR работает мгновенно
Конфигурация Более сложная Легкая, минимальная
Поддержка ассетов Через module.rules Через public или import
Масштабируемость Отлично для больших проектов Отлично для маленьких и средних проектов

Использование сборщиков позволяет поддерживать проект Phaser структурированным, облегчает импорт модулей, автоматизирует управление ассетами и ускоряет процесс разработки. Правильная настройка Webpack или Vite является ключом к стабильной и масштабируемой архитектуре игры.

Оглавление