npm init -y
npm install phaser webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env
/dist
/static
bundle.js
index.html
/scenes
main.js
/src
index.js
webpack.config.js
package.json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
import 'phaser';
export default class Main extends Phaser.Scene {
constructor() {
super("main");
}
preload() {
}
create() {
this.add.rectangle(0, 0, 100, 100, 0xFF0000, 1);
}
update() {
}
}
import 'phaser';
import Main from '../scenes/main';
const config = {
type: Phaser.AUTO,
width: 1900,
height: 1080,
scene: [Main],
};
new Phaser.Game(config);
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devServer: {
static: {
directory: path.resolve(__dirname, 'dist'),
},
open: true,
},
};
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
npm start
127.0.0.1:8080
npm run build
127.0.0.1/ 'project name' /dist