How to set up Laravel Mix to build asynchronous Vue.js components?

Question

Laravel

I use asynchronous component loading . Everything works, but not exactly as we would like. Laravel Mix .jsdoes not build component files into public > js, but simply into public. Secondly, it would be nice to name the files with the name of the component. Although the second is not so important, the main thing is to deal with the first problem.
app.js

import Vue from 'vue'
import router from "./router";
import App from './components/App.vue'

new Vue({
    el: '#app',
    router,
    render: h => h(App)
})

router.js

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: "/",
            component: () => import("./components/ProductList.vue")
        },
        {
            path: "/cart",
            component: () => import("./components/ShoppingList.vue")
        }
    ]
});

webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

Answer 1

Understood.

() => import(/* webpackChunkName: "js/cart" */ "./components/ShoppingList.vue")