I am working on an AFRAME web application, trying to include multiple components I am using that have already been created a distributed through the AFRAME community. Now I know how to import modules from other JS files but AFRAME isn't built to use require or import unless I use webpack since everything needs to load before the HMTL does. Currently in my webpack.dev.config file I have my loader here

module: {
        rules:[
            {
                test: /\.(png|jpg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition:{
                        maxSize: 3 * 1024,
                    },
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include: ['src', require.resolve('aframe-physics-system')],
                use:{
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/env'],
                        plugins: ['@babel/plugin-proposal-class-properties'],
                    },
                },
            },
        ],
    }

Which I am requiring one of the current components that I am using from the community. But I would like to include more because I want to be able to use the config loader to load all the components that way so I don't have to go an download each script and actually keep it inside my source project. I am more than likely overthinking this, but how/can the include property be formatted to allow multiple require.resolve() calls?