webpack dinamic import

Сам webpack понимает синтаксис динамическогого import() и ему не нужны дополнительные инструменты/трансформеры.
Все динамическая загрузка модулей в webpack доступа из коробки.

Насчет babel и плагинов, указанных в вопросе. Зачем они вообще нужны, когда сам webpack умеет делать динамический импорт?
Они необходимы для самого babel, чтобы тот не ругался на конструкции вида import и не выдавал ошибку:

SyntaxError: <filePath>:
Support for the experimental syntax 'dynamicImport' isn't currently enabled

Плагин всего лишь пометит, что конструкции import() валидны в данном контексте и работу можно продолжать дальше. В этом можно убедиться на примере: на такой код babel будет ругаться, но если подключить @babel/plugin-syntax-dynamic-import, то все будет в порядке, причем исходный код и результирующий будут одинаковые, т.к. плагин всего лишь выставляет внутренний флаг babel, ничего не преобразуя: исходный код плагина.

• @babel/plugin-syntax-dynamic-import. С ним уже должно быть понятно, еще замечу, что он упомянут в официальной документации webpack при описании кейса с async/await, которые предлагается трансформировать при помощи babel, и чтобы babel отработал корректно просят еще подключить этот плагин. Т.е. документация не говорит использовать его явно, только при необходимости.

• dynamic-import-webpack. Этот плагин нужен для преобразования import() в старый вебпаковский динамический импорт вида require.ensure. Уже webpack официально поддерживается import(), поэтому смысл в этом плагине на текущий момент уже нет. К тому же данный вид не поддерживает динамическое значение import(): имя модуля должно быть явно захардкорено, т.е. нельзя писать

  // ...
  import(`./my-module${index}`)
  // ...
  

  необходимо вручную описать все модули

  // ...
  import('./my-module1')
  // ...
  import('./my-module2')
  // ...
  import('./my-module3')
  // ...
  

  А иначе, webpack возьмет и все модули с префиксом my-module поместит в один чанк.

Исходя из этого:

• Если вы используете babel, вам нужно еще подключить плагин @babel/plugin-syntax-dynamic-import;

• Если вы не используете babel, то вам не нужны никакие плагины.

Конкретно в вашем случае проблема возникает из-за плагина dynamic-import-webpack, если вы его удалите, все должно быть хорошо.

Также, я сделал два примера: в одном используется только webpack, в другом webpack плюс babel. Пример необходимо запустить командой

npm start

После открытия страницы нажмите на любую кнопку, и вы увидите, что скрипты загружаются динамически (вкладка network и консоль)
Пример 1
Пример 2 (с babel)

Из вопроса непонятно какой версией webpack вы пользуетесь, скорее всего последней (на текущий момент это 4).

Обновлено
Если у вас webpack версии >=4.29.0 и вы получаете ошибку вида:

Module parse failed: 'import' and 'export' may only appear at the top level
You may need an appropriate loader to handle this file type.

То скорее всего воспроизводится этот баг: https://github.com/webpack/webpack/issues/8656

Есть пара воркэраундов:

1. Сделать downgrade вепбака до версии 4.28.4
2. Исправить проблему с версиями пакета acorn, из-за которых появляется проблема.
   1) Добавить секцию resolutions для package.json:

   "resolutions": {
       "webpack/acorn": "6.1.1"
   }
   

   2) Установить к себе пакет acorn версией 6.1.1:

   npm i --save-dev acorn@^6.1.1
   

   3) Запустить npm dedupe