Working with Phaser, TypeScript and webpack – step 2: publishing your game

Welcome to step 2 of the series about Phaser, TypeScript and webpack. In first step we saw how to configure webpack and some plugins to let you develop with Phaser.

Now it’s time to see how to distribute your awesome game. In previous step we already created a webpack configuration file called webpack.development.js.

Now it’s time to create a new webpack configuration file to be used for distribution. I called it webpack.distribution.js:

const path = require('path');

// here we use the plugins to clear folders and copy folder content
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {

        // this is our entry point, the main JavaScript file
        app: './src/main.js',
    },
    output: {

        // this is our output file, the one which bundles all libraries
        filename: 'main.js',

        // and this is the path of the output bundle, "dist" folder
        path: path.resolve(__dirname, 'dist'),
    },

    // we are in production mode
    mode: 'production',
    plugins: [

        // here we clean the destination folder
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: false
        }),

        // here we copy some files to destination folder.
        // which files?
        new CopyPlugin({
            patterns: [
                { 
                    // src/index.html
                    from: 'index.html',
                    context: 'src/'
                },
                {
                    // every file inside src/assets folder
                    from: 'assets/*',
                    context: 'src/'
                }
            ]
        })
    ]
};

We also need to update package.json file to add the script to be used to publish the game for distribution:

{
    "name": "phaserwebpack",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "development": "webpack serve --open --config webpack.development.js",
        "distribution": "webpack --config webpack.distribution.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "phaser": "^3.55.2"
    },
    "devDependencies": {
        "clean-webpack-plugin": "^4.0.0-alpha.0",
        "copy-webpack-plugin": "^9.0.1",
        "webpack": "^5.48.0",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^3.11.2"
    }
}

Now, to create your distributable package, simply type on your terminal console:

npm run distribution

And in your dist folder, you’ll find the distributable game, this one:

To make it scale down I changed a but main.js but this has nothing to do with webpack distribution:

import 'phaser';

class PlayGame extends Phaser.Scene {
    constructor() {
        super("PlayGame");
    }
    preload() {
        this.load.image('logo', 'assets/phaser3-logo.png');    
    }
    create() {
        this.image = this.add.image(400, 300, 'logo');
    }
    update() {
        this.image.rotation += 0.01;   
    }
}

let config = {
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
        parent: 'thegame',
        width: 800,
        height: 600
    },
    scene: PlayGame
};

new Phaser.Game(config);

And now we know how to work with npm both in development and distribution mode.

Next step, early next week, TypeScript! Stay tuned.