Publishing HTML5 games with Phaser, webpack and Visual Studio Code

Talking about Game development, HTML5, Javascript and Phaser.

If you already followed the post Developing HTML5 games with Phaser, webpack and Visual Studio Code now you know how to use Phaser, webpack and Visual Studio Code to develop HTML5 games.

In previous post, anyway, I didn’t show you how to export your work in a way you can distribute.

Time to see it right now.

All posts in this tutorial series:

Step 1: how to install Node.js and npm, and what to do with them

Step 2: how to set up a web server with Node.js, and why you should do it.

Step 3: using Visual Studio Code to develop HTML5 games with Phaser and webpack.

Step 4: how to publish and distribute your HTML5 games with Phaser and webpack.

Step 5: moving from JavaScript to TypeScript.

First, just like you created the file called webpack.development.js, create a new file called webpack.distribution.ts, with this content:

JavaScript

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/'
                }
            ]
        })
    ]
}

Here we will be using most of the webpack plugins installed in previous post.

Now we need to add a line to package.json:

JSON

{
  "name": "phaserproject",
  "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.70.0"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^11.0.0",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

Now, once our project is finished and ready for distribution, just enter in the terminal:

npm run distribution

This way:

After some seconds, your game will be exported in dist folder, which should look this way:

As you can see, we have only one big JavaScript file called main.js, which includes our scripts, Phaser and any other external library listed in package.json under dependencies.

And this is the working result:

Now you are able to develop, test, and create distributable versions of your HTML5 games.

Next time we’ll drop JavaScript to embrace TypeScript, then I’ll give a Christmas Gift to you all, stay tuned!

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.