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.
fusepilot
All 16 comments
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?
englercj
on 28 May 2015
drkibitz
on 29 May 2015
@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.
mking
on 6 Jun 2015
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
oal
on 4 Jul 2015
Closing since this seems answered.
englercj
on 2 Aug 2015
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
RanzQ
on 31 Oct 2015
I guess you might need some kind of plugin for webpack for it to support .json require loading? Node/browserify support it natively.
englercj
on 31 Oct 2015
@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.
RanzQ
on 31 Oct 2015
Hmm, weird. Yeah sorry i'm not familiar with it either :/
englercj
on 31 Oct 2015
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.
Nazariglez
on 12 Nov 2015
This is the most direct and simple example of configuring webpack with PIXI that I found.
davydka
on 8 Jan 2016
This gist is the most simple webpack + pixi.js config :
https://gist.github.com/mjackson/ecd3914ebee934f4daf4
( with great comments )
FlorianBELLAZOUZ
on 21 Mar 2016
the gist linked above suffers from a bug related to pixijs/pixi.js@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 😞
cltatman
on 8 May 2016
Just ran into this problem. Thanks a lot for the solution!
czanella
on 18 Jul 2016
Here is a working configuration for Webpack / Typescript and PixiJS :-). https://gist.github.com/Nek-/b9775f7a88eb896db8afc37a89db3771
Nek-
on 25 Sep 2017
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.
![lock[bot] picture](https://avatars1.githubusercontent.com/in/6672?v=4&s=40)
lock[bot]
on 24 Feb 2019
Related issues
readygosports
·
3Comments
finscn
·
3Comments
YuryKuvetski
·
3Comments
madroneropaulo
·
3Comments
MRVDH
·
3Comments
Most helpful comment
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.