Skip to content

Instantly share code, notes, and snippets.

@Nek-

Nek-/main.ts

Created Sep 25, 2017
Embed
What would you like to do?
PixiJS & TypeScript & Webpack 3.5
import * as PIXI from 'pixi.js';
document.addEventListener('DOMContentLoaded', () => {
let renderer = PIXI.autoDetectRenderer(
600,
400,
{antialias: true, transparent: false, resolution: 1, backgroundColor: 0xFFFFFF}
);
}, false);
{
"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"
}
}
{
"compilerOptions": {
"target": "es6",
"noImplicitAny": true,
"removeComments": true,
"sourceMap": true,
"allowJs": true
}
}
'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'
})
]
};
@anthonyhan

This comment has been minimized.

Copy link

@anthonyhan anthonyhan commented Oct 12, 2017

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!

@Nek-

This comment has been minimized.

Copy link
Owner Author

@Nek- Nek- commented Oct 23, 2017

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

@gchriswill

This comment has been minimized.

Copy link

@gchriswill gchriswill commented Apr 11, 2018

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. 😉 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment