0

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')},

];
Md. Razu Haolader
  • 1
  • 2

1 Answers1

0

Do this 

mix.webpackConfig({
    output: {
        publicPath: 'public/',
        chunkFilename: '[name].js?id=[contenthash]'
    },
    optimization: {
        splitChunks: {
            automaticNameDelimiter: '-',
            name: false
        }
    }
});
Md. Razu Haolader
  • 1
  • 2
  • Welcome to Stack Overflow. Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See [How to Answer](https://stackoverflow.com/help/how-to-answer). – Sfili_81 Jun 14 '21 at 14:16