Why doesn't this code create lazy-loading chunks?

Question

JavaScript

There is the following code:

// Тут беру все файлы из папки components
const files = require.context('./components', true, /\.vue$/i);

files.keys().map(key => {
    let componentName = key.split('/').pop().split('.')[0];
// пытаюсь создать динамическую загрузку для этих компонентов
    Vue.component(componentName, () => import(
        /* webpackChunkName: "base-component-" */
        `./components/${componentName}.vue`
    ))
});

As a result, all components are still built into app.js itself, and chunks are not created ..
What's wrong here?
This is webpack.config (mb something is wrong here):

module.exports = {
    output: {
        chunkFilename: `dist/js/chunks/[name].js`,
    },
};

Answer 1

I 've heard that require.context can take some fourth parameter called mode, whose default value is NOT 'lazy' at all.

Answer 2

Well, you have no reason for webpack to create a chunk - the code sticks together.
As I understand it, we need conditions or events that separate the code

const components = [
  'cargovoyage.detail',
  'cargovoyage.list',
];

document.addEventListener('DOMContentLoaded', () => {
  components.forEach((component) => {
    const componentClass = component.replace(/\./g, '-');
    if (document.querySelector(`.${componentClass}`)) {
      import(/* webpackChunkName: "[request]" */ `components/${component}`);
    }
  });

  import(/* webpackChunkName: "vessel-form" */ './js/vessel/form');
});