We have multiple applications with routing and templating controlled by legacy PHP. Most of the apps are now using React and they share a lot of the code that we want to extract to shared chunks for better caching and to get lower per-application bundles.
I set up webpack to have multiple entry points and tinkered with different ways of split-chunking and stopped on roughly this:
https://gist.github.com/rusty-key/fa83afbd2e4a62b1dfb77124aa1c08be
Now I get these multiple shared chunks:
react.js
intl.js
vendors.js
shared.js
and app chunks:
app1.js
app2.js
app3.js
For development, I am using HtmlWebpackPlugin and it takes care of injecting all of the necessary chunks for each app. But I don't know how can I do it for production setup when I need these chunks injected to PHP templates. I can, of course, do it manually, but it's pretty tedious and it's really easy to make a mistake there.
Is there a good alternative? Maybe there is a way to generate a per-app entry script that will load all necessary chunks? Or maybe I can generate manifest with the dependency tree somehow? I.e.:
{
app1: {
"index.js": "/path/to/app1.hash.js",
"shared.js": "/path/to/shared.hash.js",
},
app2: {
"index.js": "/path/to/app2.hash.js",
"shared.js": "/path/to/shared.hash.js",
"react.js": "/path/to/react.hash.js",
}
}
Or maybe I am missing something completely obvious? It's the first time I am trying to deal with split-chunks after all.