Micro Wars

Micro Wars is a space shooter 2D Arcade type game created with Phaser 3 framework.

Screenshot

Live Version

Micro Wars

Getting Started

Clone the repository into your local computer.

Installing

First you'll have to install the newest version of Node. Then move into the project main directory on the console and follow the instructions below.

Install all the necessary packages:

$ npm install

To be sure, that npm is able to run scripts, lets set the ignore-scripts configuration key to false:

$ npm config set ignore-scripts false

You can find the scripts in the package.json file in the scripts section.

Build and open up the app in the browser:

$ npm start

webpack.config.js

The main file of which the bundle is created is set in the entry:

entry: './src/javascript/index.js'

The output file of the JavaScript bundle set in the output:

output: {
    path: path.resolve(process.cwd(), 'dist'),
  },

The output file name of the CSS bundle is set in the plugins:

plugins: [
    new MiniCssExtractPlugin({
      filename: "main.css"
    })
  ]

Notice about production mode and postcss.config.js

In postcss.config.js there is a check for process.env.NODE_ENV variable. The thing is even if you set Webpack mode to production in webpack.config.js it won't automatically change Node environment variable.

The simplest way to configure this is to install cross-env package:

$ npm install --save-dev cross-env

Now when you run npx cross-env NODE_ENV=production webpack --config webpack.config.js the process.env.NODE_ENV variable will be production and postcss.config.js check is going to work:

if(process.env.NODE_ENV === 'production') {
    module.exports = {
        plugins: [
            require('autoprefixer'),
            require('cssnano')
        ]
    }
}

From Webpack documentation: Technically, NODE_ENV is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine dev-vs-prod behavior by server tools, build scripts, and client-side libraries. Contrary to expectations, process.env.NODE_ENV is not set to "production" within the build script webpack.config.js. Thus, conditionals like process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js' within webpack configurations do not work as expected.