title: React & Webpack - Project set up for multi page application
body: <p>I'm starting up a react project (using create-react-app) which will have multi "one page" components within. So, I assume, the directory structure for development would look like below:</p>
  
  <pre><code>/Project
    /node_modules
    /public
    /src
      /components
        /layout
        /popup
        ...
      /pages
        /dashboard
          index.js
        /profiles
          index.js
          ...
  </code></pre>
  
  <p>If I build the project without any modification, it would bundle all the source code and resources under one directory. Well, that's not going to work for what I am trying to do for this project. I need to have different bundles for each page. So the bundles under the /public folder should look something similar to the following structure:</p>
  
  <pre><code>/Project
    ...
    /build
      /dashboard
        /static
          /css
          /js
          /media
        index.html
      /profiles
        /static
          /css
          /js
          /media
        index.html
    ...
  </code></pre>
  
  <p>I looked at "Code Splitting" in webpack documentation. There's a good example with different entry points but I couldn't adapt it. How can I achieve the desired setup with webpack and react?</p>