fix demo

Author: Matt Colman

demo/states/LoaderState.js

@@ -9,7 +9,12 @@ export default class extends Phaser.State {
   }
 
   create () {
-    this.manifestLoader = this.game.plugins.add(ManifestLoader)
+    const req = require.context(
+      '../../assets',
+      true,
+      /.*\.png|json|ttf|woff|woff2|xml|mp3|jpg|jpeg$/
+    )
+    this.manifestLoader = this.game.plugins.add(ManifestLoader, req)
     // What I like about the ManifestLoader is that `loadManifest` returns
     // a promise, so we have more control over it.
     Promise.all([
@@ -22,9 +27,15 @@ export default class extends Phaser.State {
 
   startLoadingAnimation () {
     return new Promise((resolve, reject) => {
-      const spinner = this.add.image(this.world.centerX, this.world.centerY, 'loader')
+      const spinner = this.add.image(
+        this.world.centerX,
+        this.world.centerY,
+        'loader'
+      )
       spinner.anchor.set(0.5)
-      this.add.tween(spinner).to({angle: 360}, 1000, 'Linear', true, 0, -1, false)
+      this.add
+        .tween(spinner)
+        .to({ angle: 360 }, 1000, 'Linear', true, 0, -1, false)
       // If the assets are found in the browser cache they will probably load in < 1 second
       // typically causing a flash where the user sees the loading animation for a split second
       // Here we ensure the loading will be visible for at least 2 seconds so there is no flash

webpack.config.js

@@ -13,10 +13,7 @@ console.log('isProd', isProd)
 
 module.exports = {
   entry: {
-    app: [
-      'babel-polyfill',
-      path.resolve(__dirname, 'demo/main.js')
-    ],
+    app: ['babel-polyfill', path.resolve(__dirname, 'demo/main.js')],
     vendor: ['pixi', 'p2', 'phaser', 'webfontloader']
   },
   devtool: 'cheap-source-map',
@@ -28,40 +25,84 @@ module.exports = {
   },
   watch: !isProd,
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor'/* chunkName= */, filename: 'vendor.bundle.js'/* filename= */ }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor' /* chunkName= */,
+      filename: 'vendor.bundle.js' /* filename= */
+    }),
     new webpack.ProvidePlugin({
-      Promise: 'imports-loader?this=>global!exports-loader?global.Promise!es6-promise'
+      Promise:
+        'imports-loader?this=>global!exports-loader?global.Promise!es6-promise'
     })
-  ].concat(!isProd ? [
-    new BrowserSyncPlugin({
-      host: process.env.IP || 'localhost',
-      port: process.env.PORT || 3000,
-      server: {
-        baseDir: ['./']
-      }
-    })
-  ] : []),
+  ].concat(
+    !isProd
+      ? [
+        new BrowserSyncPlugin({
+          host: process.env.IP || 'localhost',
+          port: process.env.PORT || 3000,
+          server: {
+            baseDir: ['./']
+          }
+        })
+      ]
+      : []
+  ),
   module: {
     rules: [
-      { test: /\.js$/, use: ['babel-loader'], include: [path.join(__dirname, 'src'), path.join(__dirname, 'demo')] },
+      {
+        test: /\.js$/,
+        use: ['babel-loader'],
+        include: [path.join(__dirname, 'src'), path.join(__dirname, 'demo')]
+      },
       { test: /pixi\.js/, use: ['expose-loader?PIXI'] },
       { test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] },
       { test: /p2\.js/, use: ['expose-loader?p2'] },
-      { test: /\.css$/,
-        use: [ 'style-loader', 'css-loader' ] },
-      { test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
-        use: 'url-loader?prefix=font/&limit=10000&name=[name]-[hash].[ext]' },
-      { test: /\.mp3$/,
-        use: 'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]' },
-      { test: /.*\.(gif|png|svg)$/i,
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
+        use: 'url-loader?prefix=font/&limit=10000&name=[name]-[hash].[ext]'
+      },
+      {
+        test: /\.mp3$/,
+        use: 'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]'
+      },
+      {
+        test: /\.(gif|png|svg)$/i,
         use: [
-          'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
-          'image-webpack-loader?{progressive:true, optimizationLevel: 7, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
-        ]},
-      { test: /\.(jpg)$/,
-        use: 'url-loader?limit=25000&name=[name]-[hash].[ext]'},
-      { test: /\.xml$/,
-        use: 'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]'}
+          {
+            loader: 'file-loader',
+            options: {
+              hash: 'sha512',
+              digest: 'hex',
+              name: '[hash].[ext]'
+            }
+          },
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              mozjpeg: {
+                progressive: true
+              },
+              optipng: {
+                optimizationLevel: 7
+              },
+              gifsicle: {
+                interlaced: false
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(jpg)$/,
+        use: 'url-loader?limit=25000&name=[name]-[hash].[ext]'
+      },
+      {
+        test: /\.xml$/,
+        use: 'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]'
+      }
     ]
   },
   node: {
@@ -71,9 +112,9 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'phaser': phaser,
-      'pixi': pixi,
-      'p2': p2,
+      phaser: phaser,
+      pixi: pixi,
+      p2: p2,
       assets: path.join(__dirname, 'assets')
     }
   }