Importing Box2D?

I want to figure out how to import the Box2D plug-in into my Phaser project with this template. I threw box2d.js into /node_modules/phaser-ce/build/custom and adjusted the Webpack configuration.

My current set up is as follows:

main.js:

import 'pixi'
import 'p2'
import 'box2d'
import Phaser from 'phaser'

webpack.config.js:

    var path = require('path')
    var webpack = require('webpack')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    var BrowserSyncPlugin = require('browser-sync-webpack-plugin')
    
    // Phaser webpack config
    var phaserModule = path.join(__dirname, '/node_modules/phaser-ce/')
    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')
    var box2d = path.join(phaserModule, 'build/custom/box2D.js')
    
    var definePlugin = new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
    })
    
    module.exports = {
      entry: {
        app: [
          'babel-polyfill',
          path.resolve(__dirname, 'src/main.js')
        ],
        vendor: ['pixi', 'p2', 'phaser', 'box2d', 'webfontloader']
      },
      devtool: 'cheap-source-map',
      output: {
        pathinfo: true,
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: 'bundle.js'
      },
      watch: true,
      plugins: [
        definePlugin,
        new webpack.optimize.CommonsChunkPlugin({ name: 'vendor'/* chunkName= */, filename: 'vendor.bundle.js'/* filename= */}),
        new HtmlWebpackPlugin({
          filename: '../index.html',
          template: './src/index.html',
          chunks: ['vendor', 'app'],
          chunksSortMode: 'manual',
          minify: {
            removeAttributeQuotes: false,
            collapseWhitespace: false,
            html5: false,
            minifyCSS: false,
            minifyJS: false,
            minifyURLs: false,
            removeComments: false,
            removeEmptyAttributes: false
          },
          hash: false
        }),
        new BrowserSyncPlugin({
          host: process.env.IP || 'localhost',
          port: process.env.PORT || 3000,
          server: {
            baseDir: ['./', './build']
          }
        })
      ],
      module: {
        rules: [
          { test: /\.js$/, use: ['babel-loader'], include: path.join(__dirname, 'src') },
          { test: /pixi\.js/, use: ['expose-loader?PIXI'] },
          { test: /phaser-split\.js$/, use: ['expose-loader?Phaser'] },
          { test: /p2\.js/, use: ['expose-loader?p2'] },
          { test: /box2D\.js/, use: ['expose-loader?box2d'] }
        ]
      },
      node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
      },
      resolve: {
        alias: {
          'phaser': phaser,
          'pixi': pixi,
          'p2': p2,
          'box2d': box2d
        }
      }
    }

When I run the app, I get a ‘Uncaught ReferenceError: box2d is not defined’ in my console. The line in reference is the second line of box2D.js.

Simply throwing the file in a <script> tag in index.html works, but it is sloppy and not preferred.

Any suggestions to using a modular Box2D with this template?

[dywedir]

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

[tahagabre]

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