title: How to reuse webpack bundle in another bundle?
body: <p>Hi I'm building a React app with SSR. Server and client part both written in typescript and transpiled separately.
  Here the app structure for the better understanding:</p>
  
  <p><a href="https://i.stack.imgur.com/VzLFP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VzLFP.png" alt="enter image description here"></a></p>
  
  <p>Here the simplified webpack configs for the server and client bundles: </p>
  
  <pre><code>// webpack.client.js
  
  module.exports = {
    mode: "development",
    resolve: {
      modules: ["src", "static", "node_modules"],
      extensions: [".ts", ".tsx", ".js", ".jsx"],
    },
  
    entry: [
      "./src/client/index.tsx"
    ],
  
    output: {
      filename: "bundle.js",
      path: PUBLIC_PATH,
    },
  
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: "ts-loader",
            }
          ],
        },
      ]
    },
    plugins: [
      new webpack.DefinePlugin({ IS_SERVER: false })
    ]
  };
  </code></pre>
  
  <p>Server config looks pretty much the except for the <code>target</code> and <code>externals</code>    </p>
  
  <pre><code>//webpack.server.js
  const config = {
    mode: "development",
    resolve: {
      modules: ["src", "static", "node_modules"],
      extensions: [".ts", ".tsx", ".js", ".jsx"],
    },
  
    externals: [webpackNodeExternals()],
    target: 'node',
  
    entry: [
      "./src/server/index.ts"
    ],
  
    output: {
      filename: "bundle.js",
      path: SERVER_BUILD_PATH
    },
  
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: "ts-loader",
            }
          ],
        },
      ]
    },
  
    plugins: [
      new webpack.DefinePlugin({ IS_SERVER: true })
    ]
  };
  </code></pre>
  
  <p>In the server code I got a <code>renderer</code> function which renders React application to string.</p>
  
  <pre><code>// renderer.tsx
  import React from "react";
  import { renderToString } from "react-dom/server";
  import { App } from "client/App";
  
  const html = (app) =&gt; `
    &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id="root"&gt;${app}&lt;/div&gt;
        &lt;script src="/public/bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  `;
  
  export async function renderer(req) {
    const app = renderToString(&lt;App /&gt;);
    return html(app);
  }
  </code></pre>
  
  <p>Which then returns to the client by the express server.</p>
  
  <pre><code>//index.ts
  app.get("*", async (req, res) =&gt; {
    const content = await renderer(req);
    res.send(content);
  });
  </code></pre>
  
  <p>As you see both parts need to transpile React app. The question is - how can I reuse transpiled client code in the server bundle so that server config only need to transpile <code>index.ts</code> and <code>renderer.tsx</code>?</p>