Customize Webpack

Put Webpack

Webpack is used to optimize your game (move resources to the corresponding folders, generate JSON from TMX (Tiled Map Editor), Read .view files, etc.).

All the configuration is in the @rpgjs/compiler package.

npm i rimraf @rpgjs/compiler -D

Note that @rpgjs/compiler does not work on version >5 of Webpack

Then, in the webpack.config.js file, write the following lines:

const webpack = require('@rpgjs/compiler')

module.exports = webpack(__dirname)

In the .json package, put the scripts:

{
    "scripts": {
        "build": "rimraf dist && webpack",
        "dev": "rimraf dist && webpack -w"
    }
}

Setting environment variables on the client side

Since version 3.0.0-beta.5

const webpack = require('@rpgjs/compiler')

module.exports = webpack(__dirname, {
    envsClient: ['API_URL']
})

Add the envsClient property with a value that is the same as the webpack.EnvironmentPlugin() (opens new window) parameter

If you use the dotenv (opens new window) package, remember to put the require('dotenv').config() line at the beginning of your code

Changing the Webpack configuration

For example, if you want to change the file as an entry point, you can do so:

const webpack = require('@rpgjs/compiler')
module.exports = webpack(__dirname, {
    extendClient: {
        entry : `./src/${ process.env.RPG_TYPE == 'mmorpg' ? 'client/otherfile.ts' : 'standalone/otherfile.ts' }`
    },
    extendServer: {}
})

Follow the Webpack API to configure the file (opens new window)