Explicitly require another entry chunk on-demand?

I have an app that I want to treat more-or-less like an SPA even though there are several distinct pages which which serve as entry points into it (e.g. /login, /signup, /password-reset). Each of these entry points corresponds to a named entry in webpack.config (e.g. {login: 'pages/login.jsx', signup:'pages/signup.jsx', ...} and so forth). I also emit a separate HTML page for each entry point using HtmlWebpackPlugin – it’s a very small HTML wrapper that simply includes the one entry chunk used for that page. So far so good, it all works really well and we can optimize shared code chunks and so on as advertised.

What I’m having trouble with is allowing navigation between “pages” using pushState alone, minimizing needless downloads and code loading. Ideally I should be able to go from /login to /signup simply by loading the signup entry chunk at runtime (i.e. pages/signup.jsx). I’m not sure if this is actually possible… I might be missing something.

If I load something like require('bundle?lazy!pages/signup.jsx') (or use require.ensure without bundle-loader… though as far as I understand it amounts to the same thing), well.. that works actually, except a new chunk would be created, distinct from the entry chunk (and as such would download all over again when the /signup html page is accessed directly), even though the content should be identical. I thought maybe require('bundle?lazy&name=signup!pages/signup.jsx') might work (explicitly giving it the same name as the entry chunk) but this seems to confuse webpack, I get an uncaught TypeError: Cannot read property 'call' of undefined at runtime.

Is this outright not supported (if so, don’t suppose it could be?) or am I just going about it wrong?

Author: Fantashit

1 thought on “Explicitly require another entry chunk on-demand?

Comments are closed.