Сам 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
Есть пара воркэраундов:
- Сделать downgrade вепбака до версии
4.28.4
- Исправить проблему с версиями пакета
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