Git Product home page Git Product logo

mettre-webpack-phaser3's Introduction

Mettre en place un Webpack pour Phaser3

Dans l'invite de commande

npm init -y

npm install phaser webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env

Organisation des fichers et dossiers dans le projet

/dist
	/static
	bundle.js
	index.html

/scenes
	main.js

/src
	index.js

webpack.config.js
package.json

Dans le fichier index.html

<!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>

Dans le fichier main.js

import 'phaser';

export default class Main extends Phaser.Scene {
    constructor() {
        super("main");
    }

    preload() {

    }

    create() {
        this.add.rectangle(0, 0, 100, 100, 0xFF0000, 1);
    }

    update() {

    }
}

Dans le fichier index.js

import 'phaser';
import Main from '../scenes/main';

const config = {
    type: Phaser.AUTO,
    width: 1900,
    height: 1080,
    scene: [Main],
};

new Phaser.Game(config);

Dans le fichier webpack.config.js

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,
  },
};

Dans le fichier package.json dans la clef 'scripts'

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

Lancer le projet (Dévelopement)

npm start

127.0.0.1:8080

Construire le projet (Production)

npm run build

127.0.0.1/ 'project name' /dist

mettre-webpack-phaser3's People

Contributors

voktexyt avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.