Search code examples
reactjswebpackreact-portal

Output multiple React apps from one Webpack config

I'm working on a web app that has a companion WordPress site. Let's assume domains like:

  • app.site.com
  • blog.site.com

What I'd like to do is have my webpack 4 configuration output the bundle.js but also generate something like header.js that includes a single <Header /> component (not the complete app).

Then I'd add a script tag to blog.site.com like so:

<script src="https://app.site.com/build/header.js" />`

and expect it to mount the app's <Header /> in the blog's #dom-element

How can this be achieved?

Solution

  • Create the another entry point for header component. Quoting from webpack docs:

    module.exports = {
  entry: {
    bundle: './src/app.js',
    header: './src/header.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/build'
  }
};

    This will create bundle.js from your inital entry point. And also header.js from the Header component.