Связка файлов комплекта, сгенерированных из-за общих компонентов

Question

В настоящее время я мигрирую веб-приложение, основанное на jQuery, на Vue.js. Чтобы сделать это прогрессивно, я создаю отдельное приложение для каждого модуля.

После сборки кода появляется общий файл:

assets/js/vendors.d2c6c799.js

И у каждого приложения есть свой файл:

assets/js/admin/dashboard.5c4be0d8.js
assets/js/admin/users.5c4be0d8.js
assets/js/alerts/main.5c4be0d8.js
.....

Здесь все идеально. Проблема в том, что если эти приложения используют одни и те же общие компоненты, генерируются другие файлы, например:

assets/js/admin/dashboard~users/users.c3cbae3a.js
assets/js/admin/users~main/users.c3cbae3a.js
assets/js/alerts/dashboard~main/dashboard.c3cbae3a.js
assets/js/alerts/users~main/main.c3cbae3a.js
.....

Это немного раздражает и запутывает. Я хотел бы, чтобы каждое приложение имело свои собственные файлы или все общие компоненты в одном и том же js-файле, но не генерировало кучу js-файлов, как в приведенном выше примере. Это возможно? Заранее спасибо.

Answer 1

Поскольку настройки webpack 4 автоматически разделяют общие модули на их отдельные фрагменты.

Это поведение можно изменить с помощью свойства конфигурации optimization.splitChunks ( docs ).

Чтобы вообще отключить поведение разделения по умолчанию, установите для групп кэша default и vendor значение false:

optimization: {
    splitChunks: {
        cacheGroups: {
            default: false,
            vendor: false,
        }
    }
}