phaser: Phaser doesn't work with Webpack and require

Taking @dlindenkreuz’s approach a different direction—you can also expose the files from node_modules in Phaser 2.4.5+ so you don’t have to make a custom build and still get minification. Unfortunately all the files have to be global due to a circular reference (Phaser file pulls PIXI global var, and pixi.js references Phaser from a function). The expose-loader works well here (I could not get the ProvidePlugin to work).

npm install --save phaser expose-loader

var path = require('path');

// Phaser webpack config
var phaserModule = path.join(__dirname, '/node_modules/phaser/');
var phaser = path.join(phaserModule, 'build/custom/phaser-split.js');
var pixi = path.join(phaserModule, 'build/custom/pixi.js');
var p2 = path.join(phaserModule, 'build/custom/p2.js');

module.exports = {
  ...
  module: {
    loaders: [
      { test: /pixi\.js/, loader: 'expose?PIXI' },
      { test: /phaser-split\.js$/, loader: 'expose?Phaser' },
      { test: /p2\.js/, loader: 'expose?p2' },
      ...
    ]
  },
  resolve: {
    alias: {
      'phaser': phaser,
      'pixi': pixi,
      'p2': p2,
    }
  }
};

Then in your entry file:

// commonjs
require('pixi');
require('p2');
require('phaser');

// or es2015
import 'pixi';
import 'p2';
import "phaser";

This is similar to making it an webpack external, but at least webpack can bundle it together and minify it now.

Yes, the following should just work: npm install --save phaser followed by import Phaser from "phaser". I’ve used many other libs this way, and anything else isn’t good enough.

None of these are solutions, just leaking bandages. Phaser must evolve accordingly to maintain relevance in an ES6 world. If jQuery can do it, so can Phaser.

@ElegantSudo the issue here (in this thread) isn’t to do with not being ES6, it’s to do with Phaser being one giant global single var, with no module capability at all, with dependencies to other global based libs. Which makes it a pain to ingest in a module based workflow. Which is why Phaser 3 is fully modular, and itself built with webpack2. The code is still ES5, the module format CJS, but it should make threads like this a thing of the past. ES6 will follow, but first the module based version needs completing. One leads to the other.

@photonstorm using script-loader prevents minification because the module is loaded as a string and then evaluated (see https://github.com/webpack/script-loader/issues/1).

i used following webpack config to load pixi with imports-loader, then directly provided as PIXI variable to phaser. files in lib/are built using @photonstorm’s method described above https://github.com/photonstorm/phaser/issues/1974#issuecomment-134222165. no probs with minification during build.

{
  resolve: {
    alias: {
      "pixi": path.join(__dirname, "lib/pixi.js"),
      "phaser": path.join(__dirname, "lib/phaser.js")
    }
  },
  module: {
    loaders: [
      {test: /phaser\.js$/, include: path.join(__dirname, 'lib'), loader: 'imports?PIXI=pixi'},
    ]
  }
}

no need to require pixi in my code files:

var Phaser = require("phaser");
// ES6
import Phaser from "phaser"