laravel - Laravel webpackChunkName 在块文件中使用波浪号（〜）字符创建错误的文件夹

Question

我正在使用 laravel、vuejs 开发一个 Web 应用程序，并使用 webpack mix 创建动态加载的块文件。但是当我运行 npm run watch/npm run prod 时，它会在块文件夹中创建一些带有波浪号（~）名称的错误文件夹。如何解决？

文件名错误

webpack.mix.js 文件：

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

动态路由组件：

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

做这个

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