Importing Box2D? about phaser-es6-webpack HOT 16 CLOSED

Seems like you import Phaser somewhere else outside index.js (and without that "imports-loader?...", so webpack (with minimal config) sees this as a regular import, which does not work with phaser).
expose-loader makes things available globally, so you should not import more then once

from phaser-es6-webpack.

Try this:

- { test: /box2D\.js/, use: ['expose-loader?box2d'] }
+ { test: box2d, use: ['imports-loader?this=>window'] }

from phaser-es6-webpack.

Doesn't work. I now get "Uncaught Error: Cannot find module "box2d""

I also tried var box2d = path.join(__dirname, './dist/minified/box2d-plugin-full.min.js') in case box2d not being a native Phaser module was the issue, and I got "Uncaught ReferenceError: box2d is not defined".

from phaser-es6-webpack.

Hm.. maybe

import 'box2d'

should go after Phaser import?

from phaser-es6-webpack.

Nah, both orders of import 'box2d' screws thing up.

I didn't try your suggestion of changing the webpack.config and import syntax yet.

"minimal webpack config"

Are you just commenting on how much code is in that file, or should there be a webpack.config.min.js? Probably a dumb question, but just making sure 😄

from phaser-es6-webpack.

on how much code is in that file

This :)

from phaser-es6-webpack.

Alrighty, with

import PIXI from "expose-loader?PIXI!phaser-ce/build/custom/pixi.js";
import Phaser from "expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js";
import box2d from "imports-loader?this=>window!../dist/minified/box2d-plugin-full.min.js";

in main.js and a webpack.config.js that looks like this:

const path = require("path");

module.exports = {
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        watchContentBase: true
    },
    devtool: "cheap-module-source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "src"),
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    }
};

the project actually doesn't build, unlike my initial results. Here is the error:

from phaser-es6-webpack.

I think webpack 3 require that output.filename setting (I'm using webpack 4)

  "devDependencies": {
    "@babel/core": "^7.0.0-beta.44",
    "@babel/preset-env": "^7.0.0-beta.44",
    "babel-loader": "^8.0.0-beta",
    "expose-loader": "^0.7.5",
    "imports-loader": "^0.8.0",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.1"
  }

from phaser-es6-webpack.

Update
webpack.config.js:

const path = require("path");

module.exports = {
    devServer: {
        contentBase: path.resolve(__dirname, "dist"),
        watchContentBase: true
    },
    devtool: "cheap-module-source-map",
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "src"),
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    }
};

package.json:

{
    "name": "PhaserES6Webpack",
    "version": "1.2.1",
    "description": "",
    "author": "leandro cabrera <[email protected]>",
    "main": "main.js",
    "scripts": {
        "dev": "webpack --display-error-details",
        "deploy": "webpack --config webpack.production.config.js",
        "cordova": "webpack --config webpack.cordova.config.js",
        "test": "eslint './src/**/*.js'"
    },
    "license": "MIT",
    "devDependencies": {
        "@babel/core": "^7.0.0-beta.44",
        "@babel/preset-env": "^7.0.0-beta.44",
        "babel-loader": "^8.0.0-beta",
        "expose-loader": "^0.7.5",
        "imports-loader": "^0.8.0",
        "webpack": "^4.5.0",
        "webpack-cli": "^2.0.14",
        "webpack-dev-server": "^3.1.1"
    },
    "dependencies": {
        "npm": "^6.0.0",
        "phaser-ce": "^2.10.0",
        "webfontloader": "^1.6.28"
    }
}

main.js:

import PIXI from "expose-loader?PIXI!phaser-ce/build/custom/pixi.js";
import Phaser from "expose-loader?Phaser!phaser-ce/build/custom/phaser-split.js";
import box2d from "imports-loader?this=>window!../dist/minified/box2d-plugin-full.min.js";

npm run dev returns error in console: "Can't resolve './src' in 'Users/tgabre/Desktop/timespan test'
Looking up this error gets you no where, there appears to be a multitude of potential causes.

from phaser-es6-webpack.

Try to rename main.js -> index.js

from phaser-es6-webpack.

After renaming to index.js, I no longer get any resolve errors!

While it can recognize './src', I get a compile error "Module parse failed: Unexpected character '#', You may need an appropriate loader to handle this file type." in './node_modules/phaser/src/renderer'

Error:

ERROR in /Users/tgabre/node_modules/phaser/src/renderer/webgl/shaders/BitmapMask.frag
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #define SHADER_NAME PHASER_BITMAP_MASK_FS

This issue seems to be solved using this GitHub solution although I am not sure how to would merge the 'solution' with the config we currently have.

from phaser-es6-webpack.

Ah! I get no errors now, but WARNINGs in configuration, asset size, entrypoint size, and webpack performance recommendations. main.js is referenced as the heavy file, but the only main.js that is evident is the one that is created after an npm run dev command.

from phaser-es6-webpack.

Please, remember that this version of Phaser is not created like a module. Because of that, we have some many hacks, warnings and code in the webpack config

from phaser-es6-webpack.

I'm working in the new template. It will be more simpler with Phaser 3

from phaser-es6-webpack.

@tahagabre have you tried to install it globally? As I could see Box2d is not a npm module. Maybe importing the script in the html is the "best approach"

from phaser-es6-webpack.

I guess so. I will just keep the script in the html then, but I really appreciate the help @lean @dywedir !

from phaser-es6-webpack.