PixiJS & TypeScript & Webpack 3.5

main.ts

import * as PIXI from 'pixi.js';

document.addEventListener('DOMContentLoaded', () => {
    let renderer = PIXI.autoDetectRenderer(
        600,
        400,
        {antialias: true, transparent: false, resolution: 1, backgroundColor: 0xFFFFFF}
    );
}, false);

package.json

{
  "name": "foo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "author": "Maxime Veber <maxime.veber@nekland.fr>",
  "devDependencies": {
    "@types/pixi.js": "^4.5.4",
    "clean-webpack-plugin": "^0.1.16",
    "html-webpack-plugin": "^2.30.0",
    "script-loader": "^0.7.1",
    "ts-loader": "^2.3.2",
    "typescript": "^2.4",
    "webpack": "^3.5",
    "webpack-dev-server": "^2.7.1",
    "webpack-merge": "^4.1",
    "pixi.js": "^4.5.6"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es6",
        "noImplicitAny": true,
        "removeComments": true,
        "sourceMap": true,
        "allowJs": true
    }
}

webpack.config.js

'use strict';

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');

var distDir = path.resolve(__dirname, 'dist');

module.exports = {
    // Entry point : first executed file
    // This may be an array. It will result in many output files.
    entry: './src/main.ts',

    // What files webpack will manage
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },

    // Make errors mor clear
    devtool: 'inline-source-map',

    // Configure output folder and file
    output: {
        path: distDir,
        filename: 'main_bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            }
        ]
    },

    devServer: {
        contentBase: './dist'
    },


    plugins: [
        new CleanWebpackPlugin([distDir]),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

I spent a lot of time solving the incorrect breakpoint problem that may be caused by webpack or source-map loader. your config works for me and saved me from that pit. Thanks!

Happy to help. Do not hesitate to share any improvement :) .

Thank you so much for providing this Gist openly. I found it via a issue on here. It saved me a lot of time for configuring Webpack with PIXIjs. 😉 👍