paint-brush
Configuring Your Phaser 3 Game With Webpack For Productionby@muriloRoque
383 reads
383 reads

Configuring Your Phaser 3 Game With Webpack For Production

by MuriloRoqueOctober 4th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

This tutorial will help people that are just starting to learn Phaser 3 and need extra support when deploying their game to production. 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 game, in that case I recommend you to start with this template and jump to configuring your game in this article (Step 5) In this tutorial, we need to tell our app what to do when we start our local server and when we build our app to production.
featured image - Configuring Your Phaser 3 Game With Webpack For Production
MuriloRoque HackerNoon profile picture

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.js
in this article (Step 5).

Step 1: Create webpack files

First of all, create a

webpack
folder in the root of your app. Inside this folder, create two files:
base.js
and
prod.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.

Step 3: Configure package.json

Now that we installed all of the dependencies and set up the

webpack
folder, we need to tell our app what to do when we start our local server and when we build our app to production. In your
package.json
file, inside of
"scripts"
, add these two lines of code:

"build": "webpack --config webpack/prod.js, 
— this one will be responsible for building the game and creating our production bundle. It calls webpack and uses the
prod.js
config file inside our
webpack
folder.

"start": "webpack-dev-server --config webpack/base.js --open"
 — this one will be responsible for starting our local server with our
webpack-dev-server
package. It uses the
base.js
config file inside our
webpack
folder.

Step 4: Configure base.js file

First, let’s define what webpack will do when we start our local server or build bundle, it needs to know which files will be bundled and which plugins we will be using. I made inline comments explaining each step:

const webpack = require('webpack'); // import webpack :)
const path = require('path'); // Node.js module used to manipulate file paths
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
// generates an HTML file for your application by injecting automatically all your generated bundles.
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.
module.exports = { 
   mode: 'development', // enable webpack's built-in optimizations that correspond to development
   devtool: 'eval-source-map', // Each module is executed with eval() and a SourceMap is added as a DataUrl to the eval(). Initially it is slow, but it provides fast rebuild speed and yields real files
   module: { 
      rules: [ 
         { 
            test: /\.js$/, // checks for files with .js extension in the path specified below
            include: path.resolve(__dirname, 'src/'), // checks in this path
            exclude: /node_modules/, // exclude node_modules folder
            use: { 
               loader: 'babel-loader',
               options: { 
                  presets: ['env'],
               }, // uses babel-loader to transpile your ES6 code
            },
         },
         { 
            test: [/\.vert$/, /\.frag$/],
            use: 'raw-loader',
         }, // in case you need to use Vertex and Fragment shaders, this loader will bundle them for you.
         { 
            test: /\.(gif|png|jpe?g|svg|xml)$/i,
            use: 'file-loader',
         }, // in case you need to use images, this loader will bundle them for you
      ],
   },
   plugins: [
      new CleanWebpackPlugin({
         root: path.resolve(__dirname, '../'),
      }), // specified the path where this plugin will delete the files on each rebuild
      new webpack.DefinePlugin({
         CANVAS_RENDERER: JSON.stringify(true),
         WEBGL_RENDERER: JSON.stringify(true),
      }), // config webpack to handle renderer swapping in our app
      new HtmlWebpackPlugin({
         template: './index.html',
      }), // specify where your HTML template is located
   ],
}

Step 5: Configure prod.js file

Next, let’s define what webpack will do when we build bundle, it needs to know which files will be bundled and which plugins we will be using. In this file, we use

webpack-merge
, which is responsible for merging this config file with
base.js
. Again, I made inline comments explaining each step:

const merge = require('webpack-merge'); // For merging this config with base.js
const TerserPlugin = require('terser-webpack-plugin'); // To minify your JS file in the build folder
const CopyPlugin = require('copy-webpack-plugin'); // To copy your assets to the build folder
const base = require('./base'); // Importing base.js file
module.exports = merge(base, { // Merging this config with base.js config 
   mode: 'production', // enable webpack's built-in optimizations  // that correspond to production
   output: {    
      filename: 'bundle.min.js', // The name of the built JS file
   },  
   devtool: false, // We don't need this in our production
   performance: {    
      maxEntrypointSize: 900000, 
      maxAssetSize: 900000, // These configure the file size limit of your build, webpack send you warnings if it is exceeded
   },  
   optimization: {
      minimizer: [
         new TerserPlugin({
            terserOptions: {
               output: {
                  comments: false, // Tell Terser Plugin to remove comments in your minified file
               },
            },
         }),
      ],
   },  
   plugins: [
      new CopyPlugin({ 
         patterns: [
            { from: './src/assets', to: 'src/assets' }, // Configure the path from where webpack will copy your assets from and the path where it will put it when the build is done, change it according to your app organization   
         ],
      }),
   ],
});

Conclusion

That’s basically what needs to be done for you to be able to deploy your app to production. After that, you can simply run

npm run build
and a
dist
folder with your bundle will be created in the root of your app. If you want to deploy it to Netlify, don’t forget to tell them the build command and the resulting folder where your build is.

If you like Phaser 3 games, please check out the first game I built here. Don’t forget to give me a star if you like it.

If you liked this article, make sure to:

Also behind paywall published on: https://medium.com/swlh/configuring-your-phaser-3-game-with-webpack-for-production-795329e15a6f