Настройка webpack и bundler для проекта

Для того чтобы настроить Webpack для работы с PlayCanvas, необходимо создать конфигурацию, которая позволит эффективно обрабатывать и компилировать ресурсы, такие как JavaScript-файлы, а также управлять зависимостями и сборкой проекта. Webpack служит инструментом для автоматической упаковки и оптимизации вашего кода, что особенно важно при разработке сложных и масштабируемых проектов на PlayCanvas.

Установка зависимостей

Для начала нужно установить Webpack и его зависимости. В директории проекта выполните следующие команды:

npm init -y
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save playcanvas

Эти команды создадут файл package.json и установят основные пакеты Webpack и саму библиотеку PlayCanvas.

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

Типичная структура проекта может выглядеть следующим образом:

/project
  /dist
  /src
    /assets
    /scripts
      main.js
  index.html
  package.json
  webpack.config.js
  • /src: исходные файлы проекта, включая скрипты, модели, текстуры и другие ресурсы.
  • /dist: каталог для собранных и оптимизированных файлов.
  • index.html: основной HTML-файл, который будет загружать собранный код.

Создание конфигурационного файла Webpack

Следующий шаг — создание файла конфигурации Webpack. В корне проекта создайте файл webpack.config.js, в котором опишем основные настройки:

const path = require('path');

module.exports = {
  entry: './src/scripts/main.js', // Точка входа
  output: {
    filename: 'bundle.js', // Имя собранного файла
    path: path.resolve(__dirname, 'dist'), // Каталог для собранных файлов
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // Для трансформации ES6+ в ES5
        },
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // Папка для статики
    compress: true,
    port: 9000, // Порт для локального сервера
  },
  resolve: {
    alias: {
      playcanvas: path.resolve(__dirname, 'node_modules/playcanvas/build/playcanvas.min.js'),
    },
  },
};

Описание конфигурации

  • entry: указывает точку входа в проект. В нашем случае это файл main.js в каталоге /src/scripts.
  • output: настройка для определения имени и местоположения собранного файла. Мы будем собирать все модули в файл bundle.js в папке /dist.
  • module: блок, который описывает правила обработки различных типов файлов. В данном случае мы используем babel-loader для преобразования современного JavaScript в совместимый с большинством браузеров.
  • devServer: настройка для запуска Webpack Dev Server, который будет автоматически обновлять страницу при изменениях в исходных файлах. Это очень полезно при разработке, так как не нужно вручную обновлять страницу.
  • resolve: настройка для создания алиасов, чтобы подключение библиотеки PlayCanvas происходило через playcanvas.

Использование PlayCanvas в проекте

Для работы с PlayCanvas необходимо импортировать библиотеку в ваш основной JavaScript-файл. В файле src/scripts/main.js добавьте следующее:

import { Application } from 'playcanvas';

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);

const app = new Application(canvas, {
    mouse: new pc.Mouse(canvas),
    touch: new pc.TouchDevice(canvas),
    keyboard: new pc.Keyboard(window)
});

app.start();

Этот код создает базовое приложение PlayCanvas и добавляет его на страницу. Также инициализируются события мыши, тачскрина и клавиатуры.

Сборка и запуск проекта

После настройки конфигурации и написания исходного кода, можно приступить к сборке проекта. Для этого добавьте в package.json раздел с командами для Webpack:

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

Теперь вы можете запускать сервер для разработки с помощью команды:

npm start

При этом Webpack автоматически будет следить за изменениями в исходных файлах и перезагружать страницу. Для сборки проекта в финальную версию используйте команду:

npm run build

Это создаст оптимизированный пакет в каталоге /dist.

Оптимизация и дополнительные настройки

Для повышения производительности проекта на PlayCanvas можно использовать дополнительные плагины Webpack, такие как:

  • HtmlWebpackPlugin: автоматическое создание HTML-файла, который подключает ваш собранный файл JavaScript.
  • TerserWebpackPlugin: минимизация JavaScript-кода для уменьшения размера пакета.
  • FileLoader и UrlLoader: для работы с изображениями, звуковыми файлами и другими статическими ресурсами.

Пример использования HtmlWebpackPlugin:

npm install --save-dev html-webpack-plugin

И добавление в конфиг:

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

module.exports = {
  // ... остальная конфигурация
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html', // Шаблон для генерации HTML
    }),
  ],
};

Теперь при сборке проекта Webpack автоматически сгенерирует HTML-файл с подключением собранного bundle.js.

Заключение

Настройка Webpack для проекта на PlayCanvas позволяет эффективно управлять зависимостями, организовывать сборку и минимизировать код. Важно грамотно настроить конфигурацию, чтобы проект был масштабируемым, а процесс разработки — удобным и быстрым.

Оглавление