Upgrade to Webpack 4 (including webpack-dev-server). Add ES6 support via Babel 7.

2019-01-07 17:11:12 -08:00
parent 448133c311
commit de3f661d0e
11 changed files with 9528 additions and 77 deletions
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["@babel/env", {
+      "targets": {
+        "browsers": [
+          ">0.25%",
+          "not ie 11",
+          "not op_mini all"
+        ]
+      },
+      "modules": false
+    }]
+  ],
+}
@@ -10,5 +10,5 @@ Thumbs.db
 node_modules/

 # Build
-build/
+dist/
 /npm-debug.log
@@ -1,7 +1,55 @@
 # Phaser 3 Webpack Project Template

-A Phaser 3 Project Template
+A Phaser 3 project template with ES6 support via [Babel 7](https://babeljs.io/) and [Webpack 4](https://webpack.js.org/)
+that includes hot-reloading for development and production-ready builds.

-## How to run:
+Loading images via JavaScript module `import` is also supported.

-`npm run build`
+## Requirements
+
+[Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`.
+
+## Available Commands
+
+| Command | Description |
+|---------|-------------|
+| `npm install` | Install project dependencies |
+| `npm start` | Build project and open web server running project |
+| `npm run build` | Builds code bundle with production settings (minification, uglification, etc..) |
+
+## Writing Code
+
+After cloning the repo, run `npm install` from your project directory. Then, you can start the local development
+server by running `npm start`.
+
+
+After starting the development server with `npm start`, you can edit any files in the `src` folder
+and webpack will automatically recompile and reload your server (available at `http://localhost:8080`
+by default).
+
+## Customizing Template
+
+### Babel
+You can write modern ES6+ JavaScript and Babel will transpile it to a version of JavaScript that you
+want your project to support. The targeted browsers are set in the `.babelrc` file and the default currently
+targets all browsers with total usage over "0.25%" but excludes IE11 and Opera Mini.
+
+  ```
+  "browsers": [
+    ">0.25%",
+    "not ie 11",
+    "not op_mini all"
+  ]
+  ```
+
+### Webpack
+If you want to customize your build, such as adding a new webpack loader or plugin (i.e. for loading CSS or fonts), you can
+modify the `webpack/base.js` file for cross-project changes, or you can modify and/or create
+new configuration files and target them in specific npm tasks inside of `package.json'.
+
+## Deploying Code
+After you run the `npm run build` command, your code will be built into a single bundle located at 
+`dist/bundle.min.js` along with any other assets you project depended. 
+
+If you put the contents of the `dist` folder in a publicly-accessible location (say something like `http://mycoolserver.com`), 
+you should be able to open `http://mycoolserver.com/index.html` and play your game.
@@ -1,9 +1,8 @@
- <!DOCTYPE html>
- <html>
-     <head>
-         <meta charset="utf-8">
-     </head>
-     <body>
-         <script src="build/project.bundle.js" charset="utf-8"></script>
-     </body>
- </html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+  </body>
+</html>
@@ -1,11 +1,11 @@
 {
  "name": "phaser3-project-template",
-  "version": "1.0.4",
+  "version": "1.1.0",
  "description": "A Phaser 3 Project Template",
  "main": "src/index.js",
  "scripts": {
-    "build": "webpack",
-    "start": "webpack-dev-server"
+    "build": "webpack --config webpack/prod.js",
+    "start": "webpack-dev-server --config webpack/base.js --open"
  },
  "repository": {
    "type": "git",
@@ -19,10 +19,21 @@
  },
  "homepage": "https://github.com/photonstorm/phaser3-project-template#readme",
  "devDependencies": {
-    "webpack-dev-server": "^2.11.0",
-    "webpack": "^3.4.1"
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^1.0.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "image-webpack-loader": "^4.6.0",
+    "raw-loader": "^1.0.0",
+    "terser-webpack-plugin": "^1.2.1",
+    "webpack": "^4.28.3",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14",
+    "webpack-merge": "^4.2.1"
  },
  "dependencies": {
-    "phaser": "^3.0.0-beta.20"
+    "phaser": "^3.15.1"
  }
 }
@@ -1,34 +1,32 @@
-import 'phaser';
+import Phaser from "phaser";
+import logoImg from "./assets/logo.png";

-var config = {
-    type: Phaser.AUTO,
-    parent: 'phaser-example',
-    width: 800,
-    height: 600,
-    scene: {
-        preload: preload,
-        create: create
-    }
+const config = {
+  type: Phaser.AUTO,
+  parent: "phaser-example",
+  width: 800,
+  height: 600,
+  scene: {
+    preload: preload,
+    create: create
+  }
 };

-var game = new Phaser.Game(config);
+const game = new Phaser.Game(config);

-function preload ()
-{
-    this.load.image('logo', 'assets/logo.png');
+function preload() {
+  this.load.image("logo", logoImg);
 }

-function create ()
-{
-    var logo = this.add.image(400, 150, 'logo');
-
-    this.tweens.add({
-        targets: logo,
-        y: 450,
-        duration: 2000,
-        ease: 'Power2',
-        yoyo: true,
-        loop: -1
-    });
+function create() {
+  const logo = this.add.image(400, 150, "logo");

+  this.tweens.add({
+    targets: logo,
+    y: 450,
+    duration: 2000,
+    ease: "Power2",
+    yoyo: true,
+    loop: -1
+  });
 }
@@ -1,32 +0,0 @@
-'use strict';
-
-const webpack = require('webpack');
-const path = require('path');
-
-module.exports = {
-
-    entry: './src/index.js',
-
-    output: {
-        path: path.resolve(__dirname, 'build'),
-        publicPath: '/build/',
-        filename: 'project.bundle.js'
-    },
-
-    module: {
-        rules: [
-          {
-            test: [ /\.vert$/, /\.frag$/ ],
-            use: 'raw-loader'
-          }
-        ]
-    },
-
-    plugins: [
-        new webpack.DefinePlugin({
-            'CANVAS_RENDERER': JSON.stringify(true),
-            'WEBGL_RENDERER': JSON.stringify(true)
-        })
-    ]
-
-};
@@ -0,0 +1,48 @@
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+
+module.exports = {
+  mode: "development",
+  devtool: "eval-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+      {
+        test: [/\.vert$/, /\.frag$/],
+        use: "raw-loader"
+      },
+      {
+        test: /\.(gif|png|jpe?g|svg|xml)$/i,
+        use: [
+          "file-loader",
+          {
+            loader: "image-webpack-loader",
+            options: {
+              bypassOnDebug: true
+            }
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(["dist"], {
+      root: path.resolve(__dirname, "../")
+    }),
+    new webpack.DefinePlugin({
+      CANVAS_RENDERER: JSON.stringify(true),
+      WEBGL_RENDERER: JSON.stringify(true)
+    }),
+    new HtmlWebpackPlugin({
+      template: "./index.html"
+    })
+  ]
+};
@@ -0,0 +1,23 @@
+const merge = require("webpack-merge");
+const path = require("path");
+const base = require("./base");
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = merge(base, {
+  mode: "production",
+  output: {
+    filename: "bundle.min.js"
+  },
+  devtool: false,
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false
+          }
+        }
+      })
+    ]
+  }
+});