Laravel webpackChunkName在块文件中使用波浪号〜char创建错误的文件夹

问题描述

我正在使用laravel，vuejs构建一个Web应用程序，并使用Webpack Mix创建动态加载的块文件。但是当我运行npm run watch / npm run prod时，它会使用tilde（〜）名称将一些错误的文件夹创建到块文件夹中。如何解决？

Wrong file name

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

解决方法

这样做

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