title: How to setup a webpack dev server using both historyApiFallback and proxying remote api requests?
body: <p>I have a react application which uses <code>react-router</code>, so it's making use of HTML5 history API, I've tried <code>historyApiFallback</code> set to <code>true</code> to serve 404 paths serving the same <code>index.html</code> instead of returning the HTTP response.</p>
  
  <p>That single page application does some requests to a <em>remote</em> API server, that's why I also need to proxy some requests to the express server I'm also running while developing. Web react application is served on port 3000 and API runs on port 3001.</p>
  
  <p>So I've tried:</p>
  
  <pre><code>devServer:{
      contentBase: 'src/www',  //Relative directory for base of server
      devtool: 'eval',
      hot: true,        //Live-reload
      inline: true,
      port: 3000,        //Port Number
      host: 'localhost', //Change to '0.0.0.0' for external facing server
      historyApiFallback: true,
      proxy: {
        '^\/users|sitters|bookings': {
          target: 'http://127.0.0.1:3001',
          rewrite: function(req) {
            req.url = req.url.replace(/^\/api/, '');
          }
        }
      }
    },
    devtool: 'eval',
    output: {
      path: buildPath,    //Path of output file
      filename: 'app.js'
    },
  </code></pre>
  
  <p>So I what I want is hitting the remote api server if the request's path starts with either <code>/users</code> or <code>/sitters</code> or <code>/bookings</code> but go for <code>historyApiFallback</code> (serve <code>index.html</code>) otherwise.</p>
  
  <p>Of course right now historyApiFallback works always serving the HTML file but I'd also need the proxy to be working.</p>