I am writing this article to help people that are just starting to learn Phaser 3 and need extra support when deploying their game to production. This tutorial will focus on configuring your app with Webpack, I will run through each line of code explaining what they are doing and why they are important. This tutorial won’t show you how to set up your Phaser 3 game, in that case I recommend you to start with this template and jump to configuring your

prod.jsin this article (Step 5).

Step 1: Create webpack files

First of all, create a

webpackfolder in the root of your app. Inside this folder, create two files:base.jsandprod.js. The former will be responsible for bundling your app both in development, the latter will be merged to the former and create your production bundle.

Step 2: Install dependencies

Before starting with the configuration files, you need to install the dependencies we will need. Below is the list of required modules used in this tutorial:

• webpack (obviously);
• path;
• html-webpack-plugin;
• clean-webpack-plugin;
• webpack-merge;
• terser-webpack-plugin;
• copy-webpack-plugin;
• webpack-dev-server;
• babel-loader;
• file-loader.

#phaser3 #webpack #javascript #babel #microverse #game-development #production #gaming