PIXI 5, TypeScript & Webpack - Basic Setup (TLDR)

This is a quick example of how to setup a PIXI, TypeScript & Webpack, for the detailed version check here: https://goodgecko.co.uk/pixi-typescript-webpack.html

The template for this tutorial can be downloaded here: https://github.com/goodgecko/typescript_intro

In the Terminal / Command line run:

npm init

npm i pixi.js
npm i -save-dev typescript
npm i –save-dev webpack
npm i -save-dev webpack-cli
npm i –save-dev awesome-typescript-loader
npm i –save-dev uglifyjs-webpack-plugin
npm i –save-dev http-server

tsc -init

Add Folders

|- /dist/
  |- /assets/
    |- gecko.png
  |- index.html
|- /node_modules/
|- /src/  
  |- index.ts
|- package.json
|- tsconfig.json
|- webpack.config.js

dist/index.html

<html>
	<script src="game.js"></script>
	<body></body>
</html>

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "rootDir": "./src",
    "esModuleInterop": true
  }
}

webpack.config.js

const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader')
const PACKAGE = require('./package.json');

// Library output details
var FILE_NAME = "game";
var LIBRARY_NAME = PACKAGE.name;

// Build, source, etc paths
var PATHS = {
  entryPoint: path.resolve(__dirname, 'src/Index.ts'),
  dist: path.resolve(__dirname, 'dist')
}

// Webpack config
module.exports = {
  mode: "production",
  entry: {
    [FILE_NAME]: [PATHS.entryPoint],
    [FILE_NAME + '.min']: [PATHS.entryPoint]
  },
  output: {
    path: PATHS.dist,
    filename: '[name].js',
    libraryTarget: 'umd',
    library: LIBRARY_NAME,
    umdNamedDefine: true
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  optimization: {
    minimize: true,
    minimizer: [new UglifyJsPlugin({
      include: /\.min\.js$/
    })]
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'awesome-typescript-loader',
      exclude: /node_modules/,
      query: {
        declaration: false,
      }
    }]
  },
  plugins: [
    new CheckerPlugin()
  ],
}

package.json

{
  "name": "typescript_intro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/pixi.js": "^4.8.8",
    "pixi.js": "^4.8.8"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "http-server": "^0.11.1",
    "typescript": "^3.6.3",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.9"
  }
}

src/index.ts

import * as PIXI from 'pixi.js';
	
  export class GameManager{
     private app:PIXI.Application;
    
     public constructor(){
        this.createPIXI();
        this.loadAssets();
     }
    
     private createPIXI():void{
        this.app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0xFFFFFF });	
        document.body.appendChild(this.app.view);
     }
    
     private loadAssets():void{
        this.app.loader.add('gecko', 'assets/gecko.png');
        this.app.loader.on("complete", this.onLoadComplete.bind(this) );
        this.app.loader.load();
     }
    
     private onLoadComplete( loader:PIXI.loaders.Loader, resources:PIXI.loaders.ResourceDictionary ):void{
        //create a sprite from a 'gecko.png' image
        let gecko:PIXI.Sprite = new PIXI.Sprite(resources.gecko.texture);
  
        //position the gecko in the center of the screen
        gecko.x = this.app.renderer.width / 2;
        gecko.y = this.app.renderer.height / 2;
    
        //add an anchor so the rotate pivots the center of the image
        gecko.anchor.x = 0.5;
        gecko.anchor.y = 0.5;
    
        //add the gecko to the screen
        this.app.stage.addChild(gecko);
    
        //listen for frame updates
        this.app.ticker.add(() => {
           //each frame spin the gecko around a tiny bit
           gecko.rotation -= 0.01;
        });
     }
  }
    
  window.onload = function () {
    new GameManager();
  }

cd dist

http-server