Merge pull request #266 from georgesboris/patch-1

Add simpler phaser/webpack setup sample Closes #95
phaserjs · Jun 22, 2017 · 55f23f2 · 55f23f2
2 parents 4890886 + f065a33
commit 55f23f2
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -211,6 +211,7 @@ We appreciate this is just a band-aid, and not a proper use of modules, but plea
 As with browserify, use the `pixi`, `p2`, and `phaser-split` modules in [build/custom](https://github.com/photonstorm/phaser-ce/tree/master/build/custom). You can then use [expose-loader](https://webpack.js.org/loaders/expose-loader/) to expose them as `PIXI`, `p2`, and `Phaser`.
 
 See [lean/phaser-es6-webpack](https://github.com/lean/phaser-es6-webpack) for a sample configuration.
+Or check [this gist](https://gist.github.com/georgesboris/48e40307243248f2c8890e6f8ae00613) for the simplest setup.
 
 ### Building from source
 

diff --git a/resources/Project Templates/Webpack/.gitignore b/resources/Project Templates/Webpack/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+public/assets/scripts/bundle*.js
diff --git a/resources/Project Templates/Webpack/README.md b/resources/Project Templates/Webpack/README.md
@@ -2,16 +2,21 @@
 
 Simple boilerplate project that combines [Phaser](http://phaser.io) with [Webpack](http://webpack.github.io).
 
-## Installation instructions
+## Quick start
 
 ```
-npm install webpack -g
+$ npm install      # install dependencies
+$ npm start        # run local server
+$ npm run build    # prepare your game for deployment (available on the public folder)
 ```
 
-## Build instructions
+## Notes
 
-Run the following command to build the game
+This is supposed to be a completely barebones project.
+There's no extra candy. No ES6, uglyfing your code, compressing your images. Nada.
+By providing only the minimum setup you will be able to customize it however you like,
+and will make learning the needed steps to integrate webpack and phaser really easy.
 
-```
-webpack src/entry.js build/bundle.js
-```
+## How it works
+
+The only requirement that you need to be aware when using Phaser with Webpack is that Phaser relies on some globally available variables. That can be accomplished in a controlled way by using the `expose-loader` package. We must import the required modules through this loader before importing Phaser. And that's it. No extra configuration is needed.
diff --git a/resources/Project Templates/Webpack/package.json b/resources/Project Templates/Webpack/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "phaser-webpack",
+  "version": "1.0.0",
+  "description": "Simple boilerplate project that combines [Phaser](http://phaser.io) with [Webpack](http://webpack.github.io).",
+  "dependencies": {
+    "phaser-ce": "^2.8.0"
+  },
+  "devDependencies": {
+    "expose-loader": "^0.7.3",
+    "webpack": "^3.0.0",
+    "webpack-dev-server": "^2.5.0"
+  },
+  "scripts": {
+    "start": "webpack-dev-server",
+    "build": "webpack"
+  },
+  "license": "ISC"
+}
diff --git a/...oject Templates/Webpack/assets/phaser.png → ...s/Webpack/public/assets/images/phaser.png b/...oject Templates/Webpack/assets/phaser.png → ...s/Webpack/public/assets/images/phaser.png
diff --git a/.../Project Templates/Webpack/build/.gitkeep → ...es/Webpack/public/assets/scripts/.gitkeep b/.../Project Templates/Webpack/build/.gitkeep → ...es/Webpack/public/assets/scripts/.gitkeep
diff --git a/...rces/Project Templates/Webpack/index.html → ...oject Templates/Webpack/public/index.html b/...rces/Project Templates/Webpack/index.html → ...oject Templates/Webpack/public/index.html
@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <title>hello phaser-webpack</title>
-        <script src="build/bundle.js"></script>
+        <script src="./assets/scripts/bundle.js"></script>
     </head>
     <body>
     </body>

diff --git a/resources/Project Templates/Webpack/src/entry.js b/resources/Project Templates/Webpack/src/entry.js
diff --git a/resources/Project Templates/Webpack/src/game.js b/resources/Project Templates/Webpack/src/game.js
diff --git a/resources/Project Templates/Webpack/src/index.js b/resources/Project Templates/Webpack/src/index.js
@@ -0,0 +1,30 @@
+/**
+ * Import Phaser dependencies using `expose-loader`.
+ * This makes then available globally and it's something required by Phaser.
+ * The order matters since Phaser needs them available before it is imported.
+ */
+
+import PIXI from 'expose-loader?PIXI!phaser-ce/build/custom/pixi.js';
+import p2 from 'expose-loader?p2!phaser-ce/build/custom/p2.js';
+import Phaser from 'expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js';
+
+/**
+ * Create a new Phaser game instance.
+ * And render a single sprite so we make sure it works.
+ */
+
+var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
+
+function preload() {
+  game.load.image('logo', './assets/images/phaser.png');
+}
+
+function create() {
+  var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
+  logo.anchor.setTo(0.5, 0.5);
+};
+
+function update() {
+  // ¯ \_(ツ)_/¯ 
+  // "surprise me"
+}
diff --git a/resources/Project Templates/Webpack/webpack.config.js b/resources/Project Templates/Webpack/webpack.config.js
@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = {
+
+  /**
+   * Minimal build setup.
+   * Create your app bundle.
+   */
+
+  entry: './src/index.js',
+  output: {
+    filename: 'bundle.js',
+    path: path.join(__dirname, 'public', 'assets', 'scripts')
+  },
+
+  /**
+   * Minimal development setup.
+   * Serves files in ./public folder.
+   * Refresh browser automatically when your bundle changes.
+   */
+
+  devServer: {
+    publicPath: '/assets/scripts/',
+    contentBase: path.join(__dirname, 'public'),
+    port: 3000
+  }
+
+};