Как импортировать модуль из статики, используя динамический импорт es6?

Question

Я пытаюсь добавить динамический импорт в мой код, чтобы повысить производительность на стороне клиента. Итак, у меня есть конфиг веб-пакета, в котором идет комплектация js-файлов. На SFCC связанные файлы находятся в статической папке, где путь к этим файлам выглядит примерно так: /en/v1569517927607/js/app.js)

У меня есть функция, в которой я использую динамический импорт es6 для вызова модуля, когда пользовательнажимает на кнопку. Проблема в том, что когда мы вызываем этот модуль, браузер не находит его, потому что путь неверный.

/en/lazyLoad.js net::ERR_ABORTED 404 (Not Found)

Это нормально, потому что файл включен /en/v1569517927607/js/lazyLoad.js.

Есть способ получить его с правильного пути? Вот мой код.

window.onload = () => {
    const lazyAlertBtn = document.querySelector("#lazyLoad");

    lazyAlertBtn.addEventListener("click", () => {
        import(/* webpackChunkName: "lazyLoad" */ '../modules/lazyLoad').then(module => {
            module.lazyLoad();
        });
    });
};

Answer 1

Я полагаю, что вам, вероятно, понадобится сделать магию path.resolve() в вашем операторе импорта или в файле webpack.config.js, как показано в принятом ответе на этот вопрос: Установите правильный путь для компонента lazy-loadиспользуя Webpack - ES6