Question: Multi-site code splitting - architecture help

[cjpete]

Hi,

We're using an ejected form of the CRA bundle. Some things we have changed are:

• Stylus preprocessing (postcss, etc) and variable injection via webpack
• React hot loader
• Modernizr via webpack, for flash detection (I know...)
• Absolute imports from src/ directory, e.g. import X from 'component/bla/X'

We are looking to build two branded sites from the same component codebase - the redux logic will all be common too. I see this as being two separate index.js files (a.js, b.js), which pull in their necessary dependencies as they need to, and then the child components will still re-use the common elements, actions, apis etc.

Webpack seems to support this on the JS side by code splitting the JavaScript, but this seems to get exponentially more complex when you talk about having two index.html files and separate .css files/assets etc.

The most practical option I'm considering is having a build script which takes a .env file which is passed to webpack (and the config/paths.js file for example), so that it can build the separate bundles with the relevant overrides. I.e. specify a different:

• index.html path (public/a/index.html)
• build directory path (build/a/)
• js entry point (src/a.js)

Whilst I recognise that this is not strictly a CRA repo question, I'd love to hear your thoughts on how you might tackle this?

[viankakrisna]

You can use DLL plugin for this use case. https://robertknight.github.io/posts/webpack-dll-plugins/
Build once for the common bundle, and use DllReferencePlugin to reference the common bundle on both apps.