Как разделить код с помощью webpack 4 с другим модулем

Question

Я перевожу свой проект в Webpack 4 из старой конфигурации grunt + requirejs. Это моя файловая структура:

- node_modules
- main.js
- app.js
- file1.js
- file2.js
- file3.js
- apps
   - login
     - login_app.js
     - login_view.js
     - login_controller.js
   - home
     - home_app.js
     - home_view.js
     - home_controller.js
   ...

main.js:

import APP from 'app.js';
import file3 from 'file3.js';

app.js:

import file1 from 'file1.js'
import file2 from 'file2.js'
import file3 from 'file3.js'

..
import some node_modules library
..


login_app.js:

import login_view.js
import login_controller.js
..
import some node_modules library
..

home_app.js:

import home_view.js
import home_controller.js
..
import some node_modules library
..

Итак, моя идея с функцией веб-пакета с разделением кода заключается в достижении следующих сборок:

main.js (содержит app.js + file1..3) vendor.js (содержит библиотеку node_modules)

login.js (содержит login_view + login_controller + (используется библиотека node_modules lib только здесь? Это право)

home.js (содержит home_view + home_controller + (lib_ node_modules используется только здесь? Это правильно)

Я много искал в Интернете и нашел ответ:

Как кодировать разделить одну из двух записей в Webpack 4?

Итак, используя что-то вроде этого:

cacheGroups: {
                vendors: {
                    name: 'vendors',
                    chunks: 'all',
                    enforce: true,
                    priority: 1,
                    test(module, chunks) {
                        const name = module.nameForCondition && module.nameForCondition();
                        return chunks.some(chunk => chunk.name === 'main' && /node_modules/.test(name));
                    }
                }
            }

Я пробовал в своем коде, но не могу найти правильное решение. может кто-нибудь сказать мне, что это правильный путь?