title: Export all react components in Webpack bundle file and use in html file
body: <p>I have some React components and I want to create a bundle file including them and use it in another HTML file.</p>
  
  <p>What I did:
  I created a Webpack config file that gets index.js in <code>/src</code> folder as an entry file and generates a bundle file like <code>components.js</code></p>
  
  <p>I <strong><em>exported</em></strong> all components in the <code>/src/index.js</code> file and I suppose that all of them are accessible after bundling with Webpack</p>
  
  <p>I used External key in Webpack to only generate bundle file from my source, not external libs</p>
  
  <p>At the end I put react and bundle file scripts in the HTML file and I want to use them as pure javascript function.</p>
  
  <p></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header id="headerContent"&gt;&lt;/header&gt;
      &lt;section id="newsContent"&gt;&lt;/section&gt;
      &lt;section id="categoryContent"&gt;&lt;/section&gt;
      &lt;footer id="footerContent" &gt;&lt;/footer&gt;
  
      &lt;script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"&gt;&lt;/script&gt;
      &lt;script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="components.js"&gt;&lt;/script&gt;&lt;/body&gt;
  
      &lt;script&gt;
          ReactDOM.render(React.createElement(HeaderComponent), document.getElementById("headerContent"))
          ReactDOM.render(React.createElement(NewsComponent), document.getElementById("newsContent"))
          ReactDOM.render(React.createElement(NewsComponent), document.getElementById("categoryContent"))
          ReactDOM.render(React.createElement(FooterComponent), document.getElementById("footerContent"))
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But it does not work. Did I something wrong and what is the best solution?
  Webpack Config:</p>
  
  <pre><code>module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader"
            }
          ]
        }
      ]
    },
    externals: {
      // Don't bundle the 'react' npm package with the component.
      'react': 'React',
      'react-dom' : 'ReactDOM'
    }
  }
  </code></pre>