How to organize a multi-page application using Webpack?

Question

JavaScript

Hello. Now there is a desktop application, and there was a need to make friends with Webpack.
App structure before:

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 -->

Essence of work:
"Routing" is engaged nav.js. If necessary, it loads, understands from its code that you need to download one or another file in which the code

1. If necessary, receives this or that html page from the folder via XHRpages
   
2. Understands from the page code whether it is necessary to load additional .jsfiles with the logic of this page
   
3. Adds scripttags to the document, scripts are loaded
   
4. These uploaded .jsfiles contain the declaration of a particular page ( nav.jsexports to the global scope a function for declaring pages and logic for them)
   
5. The advertised page is cached internallynav.js
   
6. the html code of the page is rendered into a special container
   
7. The function declared in paragraph 4 is called, which determines the behavior of the page when it is ready.
   
8. The next page access occurs already using the cache (point 5)
   

How can you organize the same structure but using Webpack? The use of React.js and similar libraries is not provided.