(v4) GLSLify error when using Webpack

Running my Pixi app after bundling with Webpack results in the following error:

browser.js:2 Uncaught Error: It appears that you're using glslify in browserify without its transform applied. Make sure that you've set up glslify as a source transform

Some research suggests this is a common problem among Webpack users. https://gist.github.com/mjackson/ecd3914ebee934f4daf4#gistcomment-1842689

This solution seems to work for some people, but I still haven’t gotten it working. I’m posting an issue to see if we can come up with a common guideline for making Pixi work in a webpack app.

To reproduce the problem, simply make a webpack app with the following contents:

var PIXI = require('pixi.js');
var renderer = new PIXI.WebGLRenderer(256, 256);

[kimorkim]

@endel @xTiming Hi, guys. I found a way.

webpack.config.js

module: {
        loaders: [
            ...
            { test: path.resolve(__dirname, 'node_modules', 'pixi.js'), loader: 'ify' },
            ...
        ]
    },

The window separator is . Unlike its osx.

It is seen as well in the window10.

[Relic]

You can reproduce this with the following:

npm install pixi.js webpack

webpack.config.js

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

module.exports = {
    entry: path.resolve(__dirname, 'index.js'),
    output: {
        path: path.resolve(__dirname, 'scripts/'),
        filename: 'bundle.js'
    },
    node: {
        fs: 'empty'
    }
};

index.js

var PIXI = require('pixi.js');
console.log(PIXI);
var renderer = new PIXI.WebGLRenderer(512, 512);

From the project’s root folder:

webpack --config webpack.config.js

The resulting (projectroot)/scripts/bundle.js can be accessed in a web browser and will reproduce the glslify error. Just wrote and tested it myself very quickly, if this doesn’t work let me know and I’ll try to fix it for you.