Webpack config for Pixi.js using Babel.

webpack.config.js

'use strict';

var webpack = require('webpack');
var path = require('path');

module.exports = {
	entry: './src/game.js',
	output: {
		filename: 'build/game.js'
	},
	node: {
		fs: 'empty'
	},
	module: {
		loaders: [
			{
				test: /\.json$/,
				include: path.join(__dirname, 'node_modules', 'pixi.js'),
				loader: 'json',
			},
			{
				test: /\.js$/,
				exclude: path.join(__dirname, 'node_modules'),
				loader: 'babel'
			}
		]
	}
};

Thanks for this!

Awesome 💃

This will actually just create an empty module for fs. Once any function is called that uses fs (ex: AsciiFilter.js#L25), the fs module will be empty and you will hit an error.

To avoid this, you can dump the file contents that would normally be loaded from fs into a string inline within the js file. This can be done using a in a postLoader, brfs (browserify-fs), and transform-loader.

npm install brfs
npm install transform-loader

then add this to the webpack config:

postLoaders: [
  {
    test: /\.js$/,
    loader: 'transform/cacheable?brfs',
    include: /node_modules\/pixi\.js/
  }
]

This is the most direct and simple example of configuring webpack with PIXI that I found.

https://gist.github.com/mjackson/ecd3914ebee934f4daf4