Webpack: how to inject automatically splitted chunks to external template?

Viewed 20

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.

0 Answers
Related