In my project, we use Laravel Mix to compile our JavaScript, bundling all the imports into a single file. To improve the organisation of something I'm working on, I've moved some of my JS into separate files and am dynamically importing them when needed.

function registerListeners(type, callback) {
    import(`./extras/${type}`)
        .then(module => {
            module.default({
                callback,
                // some other stuff
            })
        })
}

This all behaves fine and works, however, those dynamically imported files are put in the wrong location.

Currently, my mix config is setup with my primary JavaScript file being built to public/js/app.js

mix.js("resources/assets/js/app.js", "public/js")

The dynamically imported files however get placed directly in the public/ directory with numerical names (e.g. public/0.js, public/1.js, etc.) Is there any way to tell Laravel Mix to place these within the JavaScript directory? I don't need the files merged; as nice as that would be; I just need them in the right space.

We're currently using v4.1.4 of Laravel Mix. We're not looking to upgrade unless it's absolutely necessary.