Webpack chunk names with Laravel Mix

By default, the chunked files are compiled to the root of the public folder.

Personally, I find this annoying, especially for a large project, because you can end up with hundreds of .js chunk files.

I prefer to compile them to a specific folder, which I do not need to open either way.

You can achieve this by changing the chunk path in webpack.mix.js as follows:

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

mix.js('resources/assets/js/app.js', 'public/js/main');

mix.webpackConfig({
    output: {
        filename:'js/main/[name].js',
        chunkFilename: 'js/chunks/[name].js',
    },
});

In your blade, ensure you reference the correct file as follows:

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

Please note you can change the name of the folder from main or chunks to your preferred name.

I will assume you are building an application that utilizes Vue router from your question.

1) To answer your first Question, whenever you import your component in your route definition this way component: () => import('@/components/user'). you are simply telling webpack to code split your application bundle based on your routes in vue.

This allows your routes component to be lazy loaded, thereby reducing your main bundle size see https://router.vuejs.org/guide/advanced/lazy-loading.html. Each x.js file is created from the dynamic component import in your route definition and are automatically/lazily loaded when needed. (You can open your console as navigate between different routes under the xhr tab, you will see as the files are loaded.)

2) For your second question, check this other question How Can I Make Webpack Use a Cache-Busting Suffix?

UPDATE: you could also use HtmlWebpackPlugin, it has an attribute hash (boolean) that will automatically append a unique webpack compilation hash to all included scripts and css files. However it only includes css and js. You might need to hash other resources as well.

Hope it helps :)