Update template's packages to the latest versions (Webpack, Typescript, Phaser, Howler, etc)

Author: numbofathma

.gitignore

@@ -3,3 +3,4 @@
 dist/
 node_modules/
 .idea/
+package-lock.json

README.md

@@ -1,11 +1,11 @@
-# Phaser.io CE 2.9.4, Howler.js 2.0.7, TypeScript and Webpack 3.10.0, play nice together.
+# Phaser.io CE 2.12.0, Howler.js 2.1.2, TypeScript and Webpack 4.3, play nice together.
 #### A bootstrap project to create games with Phaser.io, Howler.js, TypeScript and Webpack.
 
 ## Features
 - Uses the latest Phaser CE 
 - Uses Howler (an awesome audio library) - can be easily removed if one does not use it
 - TypeScript linter that checks TypeScript code for readability, maintainability, and functionality errors
-- Webpack ready
+- Webpack 4 ready
 - Built-in commands to easily deploy code your code (minify, uglify, comments removal, etc)
 - Other awesome stuff!
 

package.json

@@ -3,8 +3,8 @@
   "version": "1.0.0",
   "description": "A good place to get started with Phaser and TypeScript development",
   "scripts": {
-    "start": "webpack-dev-server --config webpack.dev.config.js -d --inline --hot --progress --no-info --port 8000",
-    "build": "rimraf ./dist && webpack --config webpack.prod.config.js -p --progress",
+    "start": "webpack-dev-server --config webpack.dev.config.js -d --inline --hot --progress --port 8000 --mode development",
+    "build": "rimraf ./dist && webpack --config webpack.prod.config.js -p --progress --mode production",
     "lint": "tslint src/**/*.ts",
     "lint:fix": "npm run lint -- --fix"
   },
@@ -19,23 +19,24 @@
   "license": "MIT",
   "homepage": "https://github.com/numbofathma/phaser-typescript-webpack",
   "devDependencies": {
-    "copy-webpack-plugin": "^3.0.1",
-    "expose-loader": "^0.7.1",
-    "html-webpack-plugin": "^2.29.0",
-    "rimraf": "^2.5.4",
-    "ts-loader": "^0.8.2",
-    "tslint": "^5.8.0",
-    "tslint-loader": "^3.5.3",
-    "tslint-webpack-plugin": "^1.0.0",
-    "typescript": "^2.6.2",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.9.7",
-    "webpack-obfuscator": "^0.13.0",
-    "webpack-uglify-js-plugin": "^1.1.9"
+    "copy-webpack-plugin": "^5.0.3",
+    "expose-loader": "^0.7.5",
+    "html-webpack-plugin": "^3.2.0",
+    "rimraf": "^2.6.3",
+    "ts-loader": "^5.4.5",
+    "tslint": "^5.16.0",
+    "tslint-loader": "^3.5.4",
+    "tslint-webpack-plugin": "^2.0.4",
+    "typescript": "^3.4.5",
+    "uglifyjs-webpack-plugin": "^2.1.2",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.3.1",
+    "webpack-obfuscator": "^0.18.0"
   },
   "dependencies": {
-    "@types/howler": "^2.0.5",
-    "howler": "^2.0.7",
-    "phaser-ce": "^2.9.4"
+    "@types/howler": "^2.1.0",
+    "howler": "^2.1.2",
+    "phaser-ce": "^2.12.0"
   }
 }

src/app.ts

@@ -1,6 +1,6 @@
-import 'pixi';
-import 'p2';
-import Phaser from 'phaser-ce';
+const PIXI = require('phaser-ce/build/custom/pixi');
+const p2 = require('phaser-ce/build/custom/p2');
+const Phaser = require('phaser-ce/build/custom/phaser-arcade-physics');
 
 import {Config} from './config';
 

src/prefabs/mushroom.ts

@@ -1,4 +1,4 @@
-import Phaser from 'phaser-ce';
+const Phaser = require('phaser-ce/build/custom/phaser-arcade-physics');
 
 export class Mushroom extends Phaser.Sprite {
     constructor(game: Phaser.Game, x: number, y: number) {

src/states/game.ts

@@ -1,12 +1,8 @@
-import 'pixi';
-import 'p2';
-import Phaser from 'phaser-ce';
-
 import {Sound} from '../helpers/sound';
 import {Mushroom} from '../prefabs/mushroom';
 
 export class Game extends Phaser.State {
-    private mushroom: Phaser.Sprite;
+    private mushroom: Mushroom;
     private cursors: Phaser.CursorKeys;
     private text: Phaser.BitmapText;
     private spaceKey: Phaser.Key;

src/states/preload.ts

@@ -1,6 +1,7 @@
 import 'pixi';
 import 'p2';
 import Phaser from 'phaser-ce';
+
 import { Sound } from '../helpers/sound';
 
 export class Preload extends Phaser.State {

webpack.dev.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 
-const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TSLintPlugin = require('tslint-webpack-plugin');
 
@@ -9,11 +8,9 @@ const phaser = path.join(phaserModule, 'build/custom/phaser-arcade-physics.js');
 const pixi = path.join(phaserModule, 'build/custom/pixi.js');
 const p2 = path.join(phaserModule, 'build/custom/p2.js');
 const howler = path.join(__dirname, '/node_modules/howler/dist/howler.min.js');
-const vendorPackages = /phaser-ce|phaser-split|howler|pixi|p2/;
 
 module.exports = {
     entry: {
-        vendor: ['pixi', 'p2', 'phaser', 'howler'],
         app: [
             path.resolve(__dirname, 'src/app.ts')
         ]
@@ -27,24 +24,18 @@ module.exports = {
         new TSLintPlugin({
             files: ['./src/**/*.ts']
         }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            minChunks: function(module, count) {
-                return module.resource && vendorPackages.test(module.resource) && count >= 1;
-            }
-        }),
         new HtmlWebpackPlugin({
             template: './index.html',
             inject: 'body'
         })
     ],
     module: {
-        loaders: [
+        rules: [
             { test: /\.ts?$/, loader: 'ts-loader', exclude: '/node_modules/' },
-            { test: /pixi\.js/, use: ['expose-loader?PIXI'] },
-            { test: /phaser-arcade-physics\.js/, use: ['expose-loader?Phaser'] },
-            { test: /howler\.min\.js/, use: ['expose-loader?Howler'] },
-            { test: /p2\.js$/, use: ['expose-loader?p2'] }
+            { test: /pixi\.js/, loader: 'expose-loader?PIXI' },
+            { test: /phaser-arcade-physics\.js/, loader: 'expose-loader?Phaser' },
+            { test: /howler\.min\.js/, loader: 'expose-loader?Howler' },
+            { test: /p2\.js$/, loader: 'expose-loader?p2' }
         ]
     },
     resolve: {

webpack.prod.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 
-const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
@@ -11,14 +10,10 @@ const phaser = path.join(phaserModule, 'build/custom/phaser-arcade-physics.js');
 const pixi = path.join(phaserModule, 'build/custom/pixi.js');
 const p2 = path.join(phaserModule, 'build/custom/p2.js');
 const howler = path.join(__dirname, '/node_modules/howler/dist/howler.min.js');
-const vendorPackages = /phaser-ce|phaser-arcade-physics|howler|pixi|p2/;
 
 module.exports = {
     entry: {
-        vendor: ['pixi', 'p2', 'phaser', 'howler'],
-        app: [
-            path.resolve(__dirname, 'src/app.ts')
-        ]
+        app: path.resolve(__dirname, 'src/app.ts')
     },
     output: {
         filename: '[name].bundle.js',
@@ -32,38 +27,35 @@ module.exports = {
                 to: './assets'
             }
         ]),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: "vendor",
-            minChunks: function (module, count) {
-                return module.resource && vendorPackages.test(module.resource) && count >= 1;
-            }
-        }),
-        new UglifyJsPlugin({
-            uglifyOptions: {
-                mangle: true,
-                drop_console: true,
-                minimize: true
-            },
-            output: {
-                comments: false,
-                beautify: false
-            }
-        }),
         new JavaScriptObfuscator({
             rotateUnicodeArray: true
         }, ['vendor.bundle.js']),
         new HtmlWebpackPlugin({
             template: './index.html',
-            inject: 'body'
+            inject: 'body',
         })
     ],
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                vendor: {
+                    test: /node_modules/,
+                    chunks: "initial",
+                    name: "vendor",
+                    priority: 10,
+                    enforce: true
+                }
+            }
+        },
+        minimizer: [new UglifyJsPlugin()],
+    },
     module: {
-        loaders: [
-            {test: /\.ts?$/, loader: 'ts-loader', exclude: '/node_modules/'},
-            {test: /pixi\.js/, use: ['expose-loader?PIXI']},
-            {test: /phaser-arcade-physics\.js/, use: ['expose-loader?Phaser']},
-            {test: /howler\.min\.js/, use: ['expose-loader?Howler']},
-            {test: /p2\.js$/, use: ['expose-loader?p2']}
+        rules: [
+            { test: /\.ts?$/, loader: 'ts-loader', exclude: '/node_modules/' },
+            { test: /pixi\.js/, loader: 'expose-loader?PIXI' },
+            { test: /phaser-arcade-physics\.js/, loader: 'expose-loader?Phaser' },
+            { test: /howler\.min\.js/, loader: 'expose-loader?Howler' },
+            { test: /p2\.js$/, loader: 'expose-loader?p2' }
         ]
     },
     resolve: {