update to work with webpack v5

Author: 902seanryan

package-lock.json

@@ -21,13 +21,13 @@
     "eslint-webpack-plugin": "^3.2.0",
     "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.6.1",
+    "source-map-loader": "^1.0.0",
+    "springroll": "^2.4.4",
     "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.75.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1",
-    "source-map-loader": "^1.0.0",
-    "springroll": "^2.4.4",
-    "uglifyjs-webpack-plugin": "^2.2.0"
+    "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
     "phaser": "git+ssh://[email protected]:pbs/phaser.git#bugfix/182892591-cordova-file-retrieval-bug-latest-version",

package.json

@@ -2,6 +2,7 @@ import { Application, SafeScaleManager } from "springroll";
 import { GAMEPLAY, SCENE } from "./constants";
 import { TitleScene, GameScene } from "./scenes";
 import { FactoryPlugin } from "./plugins";
+import Phaser from 'phaser';
 
 class SpringrollGame {
     constructor() {
@@ -14,7 +15,7 @@ class SpringrollGame {
         });
 
         // Instance of a Springroll.SafeScaleManager.
-        // This will be initialized after the Phaser.Game is booted.
+        // This will be initialized after the Phaser.Game is ready.
         this.safeScale = undefined;
 
         // Instance of a Phaser.Game.
@@ -54,8 +55,8 @@ class SpringrollGame {
                 }
             });
 
-            // Listen for when the game is booted.
-            this.game.events.once("boot", () => {
+            // Listen for when the game is ready.
+            this.game.events.once("ready", () => {
                 // Create a Springroll.SafeScaleManager.
                 this.safeScale = new SafeScaleManager({
                     width: GAMEPLAY.WIDTH,
@@ -64,15 +65,15 @@ class SpringrollGame {
                     safeHeight: GAMEPLAY.SAFE_HEIGHT,
                     callback: this.onWindowResize.bind(this)
                 });
-            })
+            });
 
             // Add game scenes.
             this.game.scene.add(SCENE.GAME, GameScene);
             this.game.scene.add(SCENE.TITLE, TitleScene, true);
         }
     }
 
-    onApplicationPause(value, oldValue) {
+    onApplicationPause(value) {
         if(value) {
             this.game.scene.pause(SCENE.GAME);
         }
@@ -81,7 +82,7 @@ class SpringrollGame {
         }
     }
 
-    onMasterVolumeChange(value, oldValue) {
+    onMasterVolumeChange(value) {
         this.game.sound.volume = value;
     }
 

src/SpringrollGame.js

@@ -1,4 +1,6 @@
 import './styles.css';
 import 'phaser';
 
+
+// eslint-disable-next-line no-unused-vars
 import { SpringrollGame } from './SpringrollGame';

src/index.js

@@ -1,7 +1,7 @@
-import Phaser from 'phaser';
+import { Plugins } from 'phaser';
 import { Ball } from '../gameobjects';
 
-export class FactoryPlugin extends Phaser.Plugins.BasePlugin
+export class FactoryPlugin extends Plugins.BasePlugin
 {
     constructor(pluginManager)
     {

src/plugins/factory-plugin.js

@@ -1,6 +1,7 @@
 import { GAMEPLAY } from '../constants';
+import { Scene } from 'phaser';
 
-export class GameScene extends Phaser.Scene
+export class GameScene extends Scene
 {
     preload()
     {

src/scenes/game-scene.js

@@ -41,7 +41,7 @@ export class TitleScene extends Phaser.Scene
         springrollGame.safeScale.addEntity(this.textAnchor);
     }
 
-    startText_onPointerDown(pointer)
+    startText_onPointerDown()
     {
         this.scene.start(SCENE.GAME);
     }

src/scenes/title-scene.js

@@ -4,8 +4,8 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
 const HtmlConfig = require(path.join(__dirname, 'html.config'));
 const CleanPlugin = require('clean-webpack-plugin');
-const UglifyJsPlugin  = require('uglifyjs-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 const deploy = path.join(__dirname, 'deploy');
 const isProduction = process.env.NODE_ENV == "production";
@@ -47,10 +47,8 @@ module.exports = (env) => {
     },
 
     optimization: {
-      minimizer: [new UglifyJsPlugin({
-        uglifyOptions: {
-          output: { comments: false }
-        }
+      minimizer: [new TerserPlugin({
+        extractComments: true
       })]
     },