How to have multiple chunks but a single js file that loads them

Question

I'm trying to setup Webpack, currently not using dev-server and my app is being served by a python backend which has the index.html.

I'm trying to use the SplitChunksPlugin so that I can have multiple chunks (app, vendor, runtime, etc). However, to simplify how it loads from the python backend, I was wondering if there is a way I can tell Webpack to create an extra file, something like main.js which will dynamically load the other chunks in the right order. Is that a thing?

Answer 1

You can use dynamic import

import(/* webpackChunkName: "chunkName" */ 'chunkPath')

Creating custom chunk and import it when it's needed and your file chunkPath may contain the other chunks you want to split, and it won't be loaded immediately.

from webpack docs:

import('path/to/module') -> Promise

Dynamically load modules. Calls to import() are treated as split points, meaning the requested module and its children are split out into a separate chunk.