Compatibility with webpack

[fusepilot]

var PIXI = require('pixi.js');

First attempt gave me a bunch of webpack errors:

ERROR in ./~/pixi.js/src/filters/ascii/AsciiFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/ascii
 @ ./~/pixi.js/src/filters/ascii/AsciiFilter.js 3:9-22

ERROR in ./~/pixi.js/src/filters/blur/BlurXFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
 @ ./~/pixi.js/src/filters/blur/BlurXFilter.js 3:9-22

ERROR in ./~/pixi.js/src/filters/blur/BlurYFilter.js
Module not found: Error: Cannot resolve module 'fs' in /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/src/filters/blur
 @ ./~/pixi.js/src/filters/blur/BlurYFilter.js 3:9-22

etc...

So I set node: { fs: "empty" } in webpack's config and that got rid of the above errors.

But then this error:

ERROR in ./~/pixi.js/package.json
Module parse failed: /Users/michaeldelaney/Workspace/web_dev/gulp-starter/node_modules/pixi.js/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "name": "pixi.js",
|   "version": "3.0.6",
|   "description": "Pixi.js is a fast lightweight 2D library that works across all devices.",
 @ ./~/pixi.js/src/core/const.js 14:13-42

So I added json-loader to webpack's config.

module: {
  loaders: [{
    test: /\.json$/,
    loader: 'json-loader'
  }]
}

Success. Would be nice if this worked out of box though.

[englercj]

We use browserify brfs transform:

https://github.com/GoodBoyDigital/pixi.js/blob/master/package.json#L57-L61

I'm not sure how you would make that webpack compatible, are there any articles on webpack running browserify transforms?

[drkibitz]

https://github.com/webpack/transform-loader

[mking]

@drkibitz @englercj Thanks for the hint, I was able to get started with Pixi+Webpack using transform-loader+json-loader.

@fusepilot Here is the webpack config I am using.

[oal]

I couldn't get @mking's config to work when using Babel. I had to move brfs to postLoaders, but now it works: https://gist.github.com/oal/898df82fa64e54dd16d0

[englercj]

Closing since this seems answered.

[RanzQ]

I wasn't able to solve a problem where pixi.js/src/core/const.js tries to require ../../package.json and thows an error Cannot find module "../../package.json". I tried with both ways by @oal. This happens only when I'm using hot module reload though, on production build it works fine.

I ended up using the built version of pixi.js like import PIXI from 'pixi.js/bin/pixi.js'. And now I see a warning but hot reload works:

[HMR] ./~/pixi.js/bin/pixi.js Critical dependencies: 34:477-484 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.js 34:477-484

[englercj]

I guess you might need some kind of plugin for webpack for it to support .json require loading? Node/browserify support it natively.

[RanzQ]

@englercj It's supported when json-loader is configured. I'm not an expert with webpack but this might be some problem caused by webpack-hot-middleware, since the bundle works, the error appears on dev mode only.

[englercj]

Hmm, weird. Yeah sorry i'm not familiar with it either :/

[Nazariglez]

Webpack has an option to load "pre-packed" libraries without parse it (like pixi.js), just add noParse to your module section at webpack config, something like that:

module: { noParse: [ /.*(pixi\.js).*/ ], }

This snippet must solve the problem with the internal requires.

[davydka]

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

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

[FlorianBELLAZOUZ]

This gist is the most simple webpack + pixi.js config :

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

( with great comments )

[cltatman]

the gist linked above suffers from a bug related to 5a53e38 - pixi's version number is reported as __VERSION__

webpack.config.js should include this loader:

{
  include: path.resolve(__dirname, 'node_modules/pixi.js'),
  loader: 'transform/cacheable?browserify-versionify'
}

@mjackson mentioning here because gist comments don't send notifications apparently 😞

[czanella]

Just ran into this problem. Thanks a lot for the solution!

[Nek-]

Here is a working configuration for Webpack / Typescript and PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.