Fix issue with VueJS using expose-loader

demo-vue/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "core-js": "^3.0.0",
     "vue": "^2.6.10",
-    "phaser-ce": "2.13.3",
+    "phaser-ce": "2.16.2",
     "@ion-phaser-ce/core": "^1.0.4"
   },
   "devDependencies": {
@@ -20,7 +20,7 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^7.0.0",
     "eslint-plugin-vue": "^7.0.0",
-    "expose-loader": "^2.0.0",
+    "expose-loader": "^1.0.0",
     "vue-template-compiler": "^2.6.10"
   },
   "postcss": {

demo-vue/src/main.js

@@ -1,7 +1,7 @@
-import Vue from 'vue'
 import 'pixi'
 import 'p2'
 import 'phaser'
+import Vue from 'vue'
 import { defineCustomElements as defineIonPhaser } from '@ion-phaser-ce/core/loader'
 
 import App from './App.vue'

demo-vue/vue.config.js

@@ -1,40 +1,48 @@
-var path = require('path')
-
-var phaserModule = path.join(__dirname, '../node_modules/phaser-ce')
-var phaser = path.join(phaserModule, 'build/custom/phaser-split.js')
-var pixi = path.join(phaserModule, 'build/custom/pixi.js')
-var p2 = path.join(phaserModule, 'build/custom/p2.js')
-
 module.exports = {
-  chainWebpack: config => {
+  chainWebpack: (config) => {
     config.resolve
-    .extensions
-      .merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'])
-      .end()
     .alias
-      .set('phaser', phaser)
-      .set('pixi', pixi)
-      .set('p2', p2);
+      .set('phaser', 'phaser-ce/build/custom/phaser-split.js')
+      .set('pixi', 'phaser-ce/build/custom/pixi.js')
+      .set('p2', 'phaser-ce/build/custom/p2.js')
 
     config.module
       .rule('phaser')
       .test(/phaser-split\.js$/)
       .use('expose-loader?Phaser')
-        .loader('expose-loader?Phaser')
+        .loader('expose-loader')
+        .options({
+          exposes: {
+            globalName: "Phaser",
+            override: true,
+          }
+        })
         .end()
 
     config.module
       .rule('pixi')
       .test(/pixi\.js$/)
       .use('expose-loader?PIXI')
-        .loader('expose-loader?PIXI')
+        .loader('expose-loader')
+        .options({
+          exposes: {
+            globalName: "PIXI",
+            override: true,
+          }
+        })
         .end()
 
     config.module
       .rule('p2')
       .test(/p2\.js$/)
       .use('expose-loader?p2')
-        .loader('expose-loader?p2')
+        .loader('expose-loader')
+        .options({
+          exposes: {
+            globalName: "p2",
+            override: true,
+          }
+        })
         .end()
   }
 }