Using Phaser Input in Phaser 3 Has An Error

[SkyWorld]

I want key-in math in game, so I use Phaser Input, but I got an error.

in webpack.config.js:

const Path = require('path');
const Webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: ['babel-polyfill', Path.join(__dirname, './src/scripts/main.js')],
    output: {
        path: Path.join(__dirname, './bundle'),
        filename: 'bundle.[hash:8].js',
        chunkFilename: '[name].[chunkhash:8].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['babel-loader'],
                include: Path.join(__dirname, 'src'),
                exclude: /node_modules/,
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
            {
                test: /phaser-input\.js$/,
                use: 'exports-loader?PhaserInput=PhaserInput',
            },
            {
                type: 'javascript/auto',
                test: /\.json$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: './plugin-config/[name].[ext]',
                        },
                    },
                ],
            },
        ],
    },
    mode: 'development',
    plugins: [
        new CleanWebpackPlugin(['bundle']),
        new MiniCssExtractPlugin({
            filename: 'main.[hash:8].css',
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: Path.join(__dirname, './src/index.html'),
        }),
        new CopyWebpackPlugin([{ from: './src/assets/fonts/', to: './assets/fonts/' }]),
        new CopyWebpackPlugin([{ from: './src/assets/images/', to: './assets/images/' }]),
        new CopyWebpackPlugin([{ from: './src/assets/jsons/', to: './assets/jsons/' }]),
        new CopyWebpackPlugin([{ from: './src/assets/videos/', to: './assets/videos/' }]),
        new CopyWebpackPlugin([{ from: './src/assets/audios/', to: './assets/audios/' }]),
        new Webpack.DefinePlugin({
            CANVAS_RENDERER: JSON.stringify(true),
            WEBGL_RENDERER: JSON.stringify(true),
        }),
    ],
    resolve: {
        alias: {
            // bind version of phaser-input
            'phaser-input': '@orange-games/phaser-input/build/phaser-input.js',
            // bind to modules;
            modules: Path.join(__dirname, 'node_modules'),
        },
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'common',
                    chunks: 'all',
                },
            },
        },
    },
    devServer: {
        contentBase: Path.join(__dirname, './bundle'),
        host: '10.10.0.10',
        port: 8081,
    },
};

In my js file:

import Phaser from 'phaser';
import PhaserInput from '@orange-games/phaser-input/build/phaser-input';

// ...  

In my package.json:

{
    ...
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.4",
        "babel-plugin-transform-runtime": "^6.23.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.7.0",
        "clean-webpack-plugin": "^0.1.19",
        "copy-webpack-plugin": "^4.5.2",
        "css-loader": "^0.28.11",
        "eslint-config-airbnb-base": "^13.0.0",
        "eslint-plugin-import": "^2.13.0",
        "exports-loader": "^0.7.0",
        "file-loader": "^1.1.11",
        "html-webpack-plugin": "^3.2.0",
        "mini-css-extract-plugin": "^0.4.1",
        "node-sass": "^4.9.0",
        "optimize-css-assets-webpack-plugin": "^4.0.3",
        "postcss-loader": "^2.1.5",
        "postcss-preset-env": "^5.2.1",
        "resolve-url-loader": "^2.3.0",
        "sass-loader": "^7.0.3",
        "style-loader": "^0.21.0",
        "url-loader": "^1.0.1",
        "webpack": "^4.14.0",
        "webpack-cli": "^3.0.8",
        "webpack-dev-server": "^3.1.4"
    },
    "dependencies": {
        "@orange-games/phaser-input": "^2.0.5",
        "phaser": "^3.10.1"
    }
...
}

But I get an error in Chrome Developer Tool:
 

Quote

Uncaught Error: Module build failed (from ./node_modules/exports-loader/index.js):
no such file or directory, open 'D:\Project\Phaser3Test\node_modules\@orange-games\phaser-input\build\phaser-input.js'

How should I solve this problem? Thanks.

[snowbillr]

https://github.com/orange-games/phaser-input is a library that works with Phaser 2.x or Phaser CE. It's not built to work with Phaser 3.

[SkyWorld]

Excuse me. Does there other library support Phaser 3?