Using webpack with pixi.js

app.js

var PIXI = require('pixi.js')
console.log(PIXI)

package.json

{
  "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"
  }
}

webpack.config.js

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'
      }
    ]

  }
}

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

Worked like a charm, thanks a lot 👌

thanks a lot

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.

thank you, this worked for an entirely unrelated project 👍

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

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.

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

Thanks coryasatho, same problem solved thanks to you !

Thanks coryasato!

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

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?

Any idea how configure it for webpack 2?

@verochan I solved this problem by doing-

npm install --save babelify

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

import {Point} from 'pixi.js';

With webpack 3 it's easy :) . https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

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