Dynamic import and code splitting in webpack?

Question

JavaScript

I want to deal with this issue thoroughly, I googled a lot, but there is no complete understanding.
I am building an online store, the code is divided into many modules (tabs.js , menu.js, modals.js), but there are also more specific modules that are needed only on a specific page.
I want my catalogFilter.js module to be loaded only when needed. I got acquainted with dynamic import, a cool thing, but how to use it not in SPA, but when laying out a regular site?
How I see it:
Create an entry point in webpack like global.js, in which to statically import "global" modules (tabs, menus, modals, etc.)
Create an entry point for each page in webpack. In each page, statically import some necessary part of the code, and dynamically import everything that is possible.
Did I get the point right?
Just please, do not write (why do you need to worry so much, make one bundle and that's it). I want to sort it out and decide if it should be applied or not.