Я использую Webpack, и я хотел бы разделить клиентский код на несколько частей и загрузить их, как только они им понадобятся.
Здесь моя файловая структура:
app.js <-- Entry point as introduced to Webpack
Module.js <-- To be loaded dynamically
Прямой связи между app.js
и Module.js
, вместо этого второй файл загружается первым следующим образом:
require.ensure([], (require) => {
let path = "Module";
let module = require("./" + path).default;
});
Я использовал "./" + path
чтобы убедиться, что Webpack не станет умным и попытаться разрешить путь статически. В любом случае, этот код работает в режиме разработки с помощью webpack-dev-сервера. Под этим я подразумеваю, что Module.js
не загружается, пока я не запускаю событие для запуска вышеуказанного кода. И после этого он загружается и исполняется отлично.
Но когда я собираю проект для производства, он перестает работать. Он выдает следующую ошибку (в браузере, когда я запускаю событие загрузки), даже не пытаясь отправить запрос:
Ошибка при сборе: Не удается найти модуль './Module'.
Кроме того, когда я компоную путь динамически (например, вышеприведенный код), процесс сборки выдает следующее предупреждение:
ПРЕДУПРЕЖДЕНИЕ в. /src/app/app.js Критические зависимости: 74: 34-47 запрос зависимости - выражение
Какой правильный способ настроить Webpack для производства, чтобы он поддерживал разделение кода для динамической загрузки?
Я тестировал решение, данное @wollnyst, и вот результаты. Когда я реализую его так, он работает:
require.ensure(["./Module"], (require) => {
let path = "Module";
let module = require("./" + path).default;
});
Но это не то, как я хочу, я хочу так:
let path = "Module";
require.ensure(["./" + path], (require) => {
let module = require("./" + path).default;
});
Теперь он выдает ошибку времени выполнения в браузере:
Uncaught TypeError: webpack_require (...). Гарантировать, что это не функция
Еще не повезло!