Merge pull request #20 from ctaylo21/master

Upgrade to Webpack 4 (including webpack-dev-server). Add ES6 support via Babel 7.
2019-03-06 09:52:15 +00:00
parent b392fe65cb 2b7ef67edd
commit 01d7c430a4
11 changed files with 9518 additions and 83 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,17 +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.

-### Requirements
+Loading images via JavaScript module `import` is also supported.

-We need [Node.js](https://nodejs.org) to install and run scripts.
+## Requirements

-## Install and run
+[Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`.

-Run next commands in your terminal:
+## Available Commands

 | Command | Description |
 |---------|-------------|
-| `npm install` | Install dependencies and launch browser with examples.|
-| `npm start` | Launch browser to show the examples. <br> Press `Ctrl + c` to kill **http-server** process. |
-=======
+| `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.
@@ -4,6 +4,5 @@
    <meta charset="utf-8">
  </head>
  <body>
-         <script src="build/project.bundle.js" charset="utf-8"></script>
  </body>
 </html>
@@ -1,11 +1,11 @@
 {
  "name": "phaser3-project-template",
-  "version": "1.0.9",
+  "version": "1.1.0",
  "description": "A Phaser 3 Project Template",
  "main": "src/index.js",
  "scripts": {
-    "build": "webpack",
-    "start": "npm run build && webpack-dev-server --port=8000"
+    "build": "webpack --config webpack/prod.js ",
+    "start": "webpack-dev-server --config webpack/base.js --open"
  },
  "repository": {
    "type": "git",
@@ -19,11 +19,20 @@
  },
  "homepage": "https://github.com/photonstorm/phaser3-project-template#readme",
  "devDependencies": {
-    "webpack-dev-server": "^2.11.0",
-    "webpack": "^3.4.1",
-    "raw-loader": "^0.5.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",
+    "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.3.0"
+    "phaser": "^3.15.1"
  }
 }
@@ -1,8 +1,9 @@
-import 'phaser';
+import Phaser from "phaser";
+import logoImg from "./assets/logo.png";

-var config = {
+const config = {
  type: Phaser.AUTO,
-    parent: 'phaser-example',
+  parent: "phaser-example",
  width: 800,
  height: 600,
  scene: {
@@ -11,24 +12,21 @@ var config = {
  }
 };

-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');
+function create() {
+  const logo = this.add.image(400, 150, "logo");

  this.tweens.add({
    targets: logo,
    y: 450,
    duration: 2000,
-        ease: 'Power2',
+    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,40 @@
+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"
+      }
+    ]
+  },
+  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,27 @@
+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,
+  performance: {
+    maxEntrypointSize: 900000,
+    maxAssetSize: 900000
+  },
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          output: {
+            comments: false
+          }
+        }
+      })
+    ]
+  }
+});