How do I require modules whose names are unknown at compile time?

Question

I have a React web app which loads an app skeleton. After the skeleton is loaded in the browser, it gets a list of module names from the server by ajax. Then, it needs to fetch these module names from the server, and load them as react components inside the skeleton.

I started with Webpack 1 and had troubles loading dynamic modules because require.ensure() needs to figure out the names at build time.

I moved to JSPM where loading dynamic modules worked, but created other issues in the project.

I want to move back to Webpack but I don't know how to achieve dynamic component bundle loading.

Maybe use Webpack2?

Any ideas?

Answer 1

I managed to get this working using Webpack 2.

There are examples that show how to use ReactRouter and Webpack 2, and load each route dynamically.

Used the following links:

• Code splitting using React and Webpack 2
• Migrating from Webpack 1 to Webpack 2