igor-fedorov
@igor-fedorov
Full Stack разработчик

Как организовать многостраничное приложение c использованием Webpack?

Здравствуйте. Сейчас есть десктопное приложение, и возникла необходимость подружить его с Webpack.

Структура приложения раньше:

js/  <!-- В папке лежат некие модули, которые экспортируются в глобальную область при подключени -->
    modules/
       module-1.js
       module-2.js
       module-3.js
    nav.js
    main.js
css/
    controls.css
    ui.css
pages/
    users/
        user-page.html     <!-- В этом файле подключается user-page.js -->
        user-page.js
    tasks/
        single-task.html   <!-- В этом файле подключается tasks.js -->
        task-list.html     <!-- В этом файле подключается tasks.js -->
        tasks.js
index.html    <!-- В этом файле подключаются все .js и .css файлы из папок js и css -->


Суть работы:

"Роутингом" занимается nav.js. При необходимости подгружает , понимает из её кода, что нужно загрузить тот или иной файл, в котором соде

  1. При необходимости через XHR получает ту или иную html-страницу из папки pages
  2. Из кода страницы понимает, нужно ли подгружать дополнительные .js файлы с логикой этой страницы
  3. Добавляет script теги в документ, скрипты загружаются
  4. В этих подгружаемых .js файлах содержится объявление той или иной страницы (nav.js экспортирует в глобальную область функцию для объявления страниц и логики для них)
  5. Объявлённая страница записывается в кэш внутри nav.js
  6. html-код страницы рендерится в специальный контейнер
  7. Вызывается объявлённая в пункте 4 функция, которая определяет поведение страницы при её готовности
  8. Следующее обращение к странице происходит уже с использованием кэша (пункт 5)


Как можно организовать ту же структуру, но с использованием Webpack? Использование библиотек React.js и подобных не предусмотрено.
  • Вопрос задан
  • 336 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы