Laravel webpackChunkName create wrong folder with tilde (~) char in chunks files

Question

I am developing a web app using laravel, vuejs and creating dynamic loaded chunk files using webpack mix. But when i run npm run watch/ npm run prod its creating some wrong folder with tilde(~) name into chunk folder. How to fix it ?

Wrong file name

webpack.mix.js file:

let mix = require('laravel-mix');
/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/assets/js/app.js', 'public/js')
    .scripts(['public/js/common_lib.js', 'public/js/common.js'], 'public/js/app-bundle.js')
    .scripts(['public/assets/vendors/base/vendors.bundle.js',
            'public/assets/demo/default/base/scripts.bundle.js',
            'public/assets/demo/default/custom/components/base/toastr.js',
            'public/assets/demo/default/custom/components/base/blockui.js'
        ],
        'public/js/vendor.js')
    .sass('resources/assets/sass/app.scss', 'public/css');
mix.options({ processCssUrls: false });

mix.version();

mix.webpackConfig({
    output: {
        publicPath: 'public/',
        chunkFilename: '[name].js?id=[contenthash]',
        // chunkFilename: '[name].[contenthash].js',
        // chunkFilename: '[name].js',
    }
});

Dynamic route component:

window.Vue = require('vue');

export default [
    {name: 'ContactRecorder', path: '/contact-recorder', component: () => import( /* webpackChunkName: "js/chunks/reports/contactRecorder/list" */ '../views/reports/contactRecorder/list.vue')},
    {name: 'VoiceAnalyticsList', path: '/voice-analytics-list', component: () => import( /* webpackChunkName: "js/chunks/reports/contactRecorder/voice_analytics_list" */ '../views/reports/contactRecorder/voice_analytics_list.vue')},
    {name: 'PdCallList', path: '/pd-call-list', component: () => import( /* webpackChunkName: "js/chunks/reports/PdCall/list" */ '../views/reports/PdCall/list.vue')},
    {name: 'ManualOutboundList', path: '/manual-outbound-list', component: () => import( /* webpackChunkName: "js/chunks/reports/manualOutbound/list" */ '../views/reports/manualOutbound/list.vue')},
    {name: 'WebChatDetailList', path: '/webchat-detail-list', component: () => import( /* webpackChunkName: "js/chunks/reports/webChat/detail_list" */ '../views/reports/webChat/detail_list.vue')},
    {name: 'EmailList', path: '/email-report-list', component: () => import( /* webpackChunkName: "js/chunks/reports/email/list" */ '../views/reports/email/list.vue')},
    {name: 'EmailDetail', path: '/email-detail/:tkid', component: () => import( /* webpackChunkName: "js/chunks/reports/email/detail" */ '../views/reports/email/detail.vue')},
    {name: 'SmsList', path: '/sms-report-list', component: () => import( /* webpackChunkName: "js/chunks/reports/sms/list" */ '../views/reports/sms/list.vue')},

];

Answer 1

Do this

mix.webpackConfig({
    output: {
        publicPath: 'public/',
        chunkFilename: '[name].js?id=[contenthash]'
    },
    optimization: {
        splitChunks: {
            automaticNameDelimiter: '-',
            name: false
        }
    }
});