Laravel-webpackChunkName在chunks文件中使用波浪号(~)字符创建了错误的文件夹

Question

我正在使用laravel、vuejs开发一个web应用程序，并使用webpack-mix创建动态加载的区块文件。但当我运行npm-run-watch/npm-run-prod时，它在chunk文件夹中创建了一些带有波浪号(~(名称的错误文件夹。如何修复？

错误的文件名

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