Pascal/MI2Mario
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Caleb Taylor
2019-01-07 17:11:12 -08:00
parent 448133c311
commit de3f661d0e
11 changed files with 9528 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.babelrc
+14
View File
@@ -0,0 +1,14 @@
{
"presets": [
["@babel/env", {
"targets": {
"browsers": [
">0.25%",
"not ie 11",
"not op_mini all"
]
},
"modules": false
}]
],
}
.gitignore
+1 -1
View File
@@ -10,5 +10,5 @@ Thumbs.db
node_modules/ node_modules/
# Build # Build
build/ dist/
/npm-debug.log /npm-debug.log
README.md
+51 -3
View File
@@ -1,7 +1,55 @@
# Phaser 3 Webpack Project Template # 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.
index.html
+8 -9
View File
@@ -1,9 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
</head> </head>
<body> <body>
<script src="build/project.bundle.js" charset="utf-8"></script> </body>
</body> </html>
</html>
package-lock.json
Generated
+9342
View File
File diff suppressed because it is too large Load Diff
package.json
+17 -6
View File
@@ -1,11 +1,11 @@
{ {
"name": "phaser3-project-template", "name": "phaser3-project-template",
"version": "1.0.4", "version": "1.1.0",
"description": "A Phaser 3 Project Template", "description": "A Phaser 3 Project Template",
"main": "src/index.js", "main": "src/index.js",
"scripts": { "scripts": {
"build": "webpack", "build": "webpack --config webpack/prod.js",
"start": "webpack-dev-server" "start": "webpack-dev-server --config webpack/base.js --open"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@@ -19,10 +19,21 @@
}, },
"homepage": "https://github.com/photonstorm/phaser3-project-template#readme", "homepage": "https://github.com/photonstorm/phaser3-project-template#readme",
"devDependencies": { "devDependencies": {
"webpack-dev-server": "^2.11.0", "@babel/core": "^7.2.2",
"webpack": "^3.4.1" "@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": { "dependencies": {
"phaser": "^3.0.0-beta.20" "phaser": "^3.15.1"
} }
} }
assets/logo.png → src/assets/logo.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 176 KiB

After

Width:  |  Height:  |  Size: 176 KiB

src/index.js
+24 -26
View File
@@ -1,34 +1,32 @@
import 'phaser'; import Phaser from "phaser";
import logoImg from "./assets/logo.png";
var config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
parent: 'phaser-example', parent: "phaser-example",
width: 800, width: 800,
height: 600, height: 600,
scene: { scene: {
preload: preload, preload: preload,
create: create create: create
} }
}; };
var game = new Phaser.Game(config); const game = new Phaser.Game(config);
function preload () function preload() {
{ this.load.image("logo", logoImg);
this.load.image('logo', 'assets/logo.png');
} }
function create () function create() {
{ const logo = this.add.image(400, 150, "logo");
var logo = this.add.image(400, 150, 'logo');
this.tweens.add({
targets: logo,
y: 450,
duration: 2000,
ease: 'Power2',
yoyo: true,
loop: -1
});
this.tweens.add({
targets: logo,
y: 450,
duration: 2000,
ease: "Power2",
yoyo: true,
loop: -1
});
} }
webpack.config.js
-32
View File
@@ -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)
})
]
};
webpack/base.js
+48
View File
@@ -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"
})
]
};
webpack/prod.js
+23
View File
@@ -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
}
}
})
]
}
});