How to link chunks created by webpack in Laravel blade file

Question

I have a large app.js and vendor.js file and to reduce the size I chose method of splitting them in chunks.

when I run the webpack, it creates many chunked files but I don't know how to import them on blade layout.

I tried researching about it on web but all I can find is ways to split them, nowhere it show how to link these splitted files.

only Idea that I have in mind is read mix-manifest.json file, loop over it and then link them in blade but that doesn't looks like a good solution to me.

Hers's my Webpack config

mix.setPublicPath('public/');
mix.webpackConfig({
    watchOptions: {
        ignored: /node_modules/
    },
    optimization :  {
        splitChunks: {
            chunks: "all",
            minSize: 200000,
            maxSize: 244000,
        }
    }
}).js('resources/js/app.js', 'public/js')
    .extract(['vue', 'jquery', 'bootstrap', '@coreui/vue'])
    .extract(['@coreui/coreui', '@coreui/icons'], 'js/vendor~utils-2.js')
    .extract()
    .sass('resources/sass/app.scss', 'public/css')
    .version();

And here's how I was linking my previous JS scripts

<script src={{mix('/js/manifest.js')}}}></script>
<script src={{mix('/js/vendor.js')}}}></script>
<script src="{{ mix('/js/app.js') }}"></script>

These are the chunks created by webpack in my public/js folder