Jump to content

Phaser with Webpack : Phaser is not defined


rockcs
 Share

Recommended Posts

Hi all,

        Recently I'm trying to build my Phaser project with webpack. However I have tried for a long time and still cannot get it to work.

        I followed the instructions on this URL : https://www.npmjs.com/package/phaser 

       As the Webpack instruction mentioned, I added p2 as a dependency, and did the webpack configuration like this : 

var path = require('path');
var webpack = require('webpack');
 
var phaserModule = path.join(__dirname, '/node_modules/phaser/');
var phaser = path.join(phaserModule, 'build/custom/phaser-split.js'),
  pixi = path.join(phaserModule, 'build/custom/pixi.js'),
  p2 = path.join(phaserModule, 'build/custom/p2.js');
 
module.exports = {
	entry: './main.js',
  	output: { path: __dirname , filename: 'bundle.js' },
    module: {
        loaders: [
            { test: /pixi.js/, loader: "script" },
        ]
    },
    resolve: {
        alias: {
            'phaser': phaser,
            'pixi.js': pixi,
            'p2': p2,
        }
    }
};

And for my main.js : 

require('pixi.js');
require('p2');
require('phaser');

var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {
      preload: preload, create: create, update: update
    });
    function preload() {}
    function create() {}
    function update() {}

After  I compiled with webpack and open the browser, I'm getting error : Uncaught ReferenceError: p2 is not defined  

Did I do anything wrong here?

Then I tried to add this in loaders : 

{ test: /p2.js/, loader: "script" }

And Now when I compile the files, open the browser and get this Error : bundle.js:53 Uncaught ReferenceError: Phaser is not defined

I am new to webpack and not sure what did I do wrong on the whole configuration stuff.

Really appreciate it if some could help me. Thanks!

@rich

Link to comment
Share on other sites

I don't mess around trying to load the Phaser npm package currently. I special case the Phaser library to load with a script loader from a "vendor" directory and then depend on it being globally available everywhere else. Not ideal, but also doesn't create problems for me in my games.

Here's an example: https://github.com/drhayes/blaster/blob/6b62e0cfb6ec50b90b1d9d40c32e5c722c0c9d40/webpack.config.js#L25

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...