Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using webpack with pixi.js
var PIXI = require('pixi.js')
console.log(PIXI)
{
"name": "webpack-pixi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"brfs": "^1.4.1",
"json-loader": "^0.5.4",
"pixi.js": "^3.0.8",
"transform-loader": "^0.2.3",
"webpack": "^1.12.9"
}
}
var path = require('path')
var webpack = require('webpack')
// I'm running a very basic command to convert app.js => bundle.js. It looks like:
//
// webpack app.js bundle.js
module.exports = {
module: {
// The first error I encountered was:
//
// ERROR in ./~/pixi.js/package.json
// Module parse failed: /Users/michael/Projects/webpack-pixi/node_modules/pixi.js/package.json Line 2: Unexpected token :
// You may need an appropriate loader to handle this file type.
//
// Apparently something in pixi.js requires its package.json file. So let's
// teach webpack how to load JSON files. We could restrict this to only recognizing
// .json files in the pixi.js directory, but this is a generally useful feature
// that we might need elsewhere in our build.
loaders: [
{
test: /\.json$/,
// We could restrict using json-loader only on .json files in the
// node_modules/pixi.js directory, but the ability to load .json files
// could be useful elsewhere in our app, so I usually don't.
//include: path.resolve(__dirname, 'node_modules/pixi.js'),
loader: 'json'
}
],
// The next errors I encountered were all like:
//
// ERROR in ./~/pixi.js/src/core/renderers/webgl/filters/FXAAFilter.js
// Module not found: Error: Cannot resolve module 'fs' in /Users/michael/Projects/webpack-pixi/node_modules/pixi.js/src/core/renderers/webgl/filters
// @ ./~/pixi.js/src/core/renderers/webgl/filters/FXAAFilter.js 3:9-22
//
// Here, webpack is telling us it doesn't recognize the "fs" module. pixi.js
// is using node's fs module to read files from the file system and they're
// expecting people to use Browserify/brfs in order to make this work in
// browsers. They could be much better about this, and we could go and bother
// them to write more portable code. But then we'd have to wait for them to
// cut a new release before we can use their stuff. Isn't there anything we
// can do in the meantime? Can we somehow use the brfs transform?
//
// Webpack lets us use postLoaders to specify a module loader that runs after
// all other module loaders. In this case, we can use Browserify's brfs
// transform as a final build step. Here, we restrict this loader to files in
// the node_modules/pixi.js directory so it won't slow us down too much.
postLoaders: [
{
include: path.resolve(__dirname, 'node_modules/pixi.js'),
loader: 'transform?brfs'
}
]
}
}
@thejmazz

This comment has been minimized.

Copy link

commented Jan 19, 2016

SO much thanks for this gist. You definitely just saved me a bunch of time :)

@nickwaelkens

This comment has been minimized.

Copy link

commented Mar 6, 2016

Worked like a charm, thanks a lot 👌

@GStones

This comment has been minimized.

Copy link

commented Mar 10, 2016

thanks a lot

@clessg

This comment has been minimized.

Copy link

commented Mar 16, 2016

Thank you for this. One thing I noticed is that this slows down builds by at least a second. I fixed it by changing

loader: 'transform?brfs'

to

loader: 'transform/cacheable?brfs'

Currently unsure if this has any side-effects.

@drewlustro

This comment has been minimized.

Copy link

commented Mar 28, 2016

thank you, this worked for an entirely unrelated project 👍

@danneu

This comment has been minimized.

Copy link

commented Jul 10, 2016

Thanks, would've never figured this out by myself.

@coryasato

This comment has been minimized.

Copy link

commented Aug 5, 2016

Works for v3+. For v4+ I had to use ify-loader, glslify complains about a transform.

npm install --save-dev ify-loader browserify-versionify

postLoaders: [
  {
     include: path.resolve(__dirname, 'node_modules/pixi.js'),
     loader: 'ify'
   }
]

Thats it, I removed transform-loader and brfs from my deps and it rolls fine.

@donnellyjoe

This comment has been minimized.

Copy link

commented Aug 9, 2016

Thanks coryasato, solved the glslify error PIXI was giving me with webpack.

@r-mach

This comment has been minimized.

Copy link

commented Aug 22, 2016

Thanks coryasatho, same problem solved thanks to you !

@jephir

This comment has been minimized.

Copy link

commented Aug 27, 2016

Thanks coryasato!

@Pandan

This comment has been minimized.

Copy link

commented Oct 23, 2016

I having problems getting this to work with Pixi v4.1.0 . Anyone have a webpack config working with the latest version of Pixi?

@verochan

This comment has been minimized.

Copy link

commented Nov 6, 2016

Hi Pandan,
Have you followed coryasato instructions? If you had an error like Error: Cannot find module 'babelify', just install babelify using npm and it will work. I have Pixi v4.1.1 installed with React and Webpack and I'm just having this warning:

WARNING in ./pixi.js/bin/pixi.min.js
Critical dependencies:
7:461-468 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
@ ./pixi.js/bin/pixi.min.js 7:461-468

From where I understand it's better to use the unminified pixi source, right now I don't know if I can switch to the unminified file, does anybody get rid of this warning?

@darkowic

This comment has been minimized.

Copy link

commented Nov 10, 2016

Any idea how configure it for webpack 2?

@snoopdouglas

This comment has been minimized.

Copy link

commented Nov 10, 2016

@verochan I solved this problem by doing-

npm install --save babelify
@darkowic

This comment has been minimized.

Copy link

commented Nov 16, 2016

In new PIXI v4.1.1 transforming is not needed anymore! They fixed 'main' in package json in mr pixijs/pixi.js#2981.
Now importing from pixi works well with webpack!

import {Point} from 'pixi.js';
@Nek-

This comment has been minimized.

Copy link

commented Sep 25, 2017

@markx

This comment has been minimized.

Copy link

commented Sep 27, 2017

It seems that importing pixi.js will expose PIXI as a global var though. So one only need to import it once.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.