title: How to rewrite certain URLs in webpack-dev-server
body: <p>I am creating a React &amp; react-router v4 application bundled with Webpack. I am creating <a href="https://webpack.js.org/guides/code-splitting-async/" rel="noreferrer">async split points</a> with Webpack to async load bundles for react-router routes of my application on-demand.</p>
  
  <p>Assuming my app is called "myapp", when I deploy this to my server my static assets need to be served from:</p>
  
  <pre><code>/myapp/static/&lt;assetName&gt;
  </code></pre>
  
  <p>In order for the async bundle loading to work when deploying to the server, my Webpack output config is as follows:</p>
  
  <pre><code>output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/myapp/static/",
    chunkFilename: "[name].[chunkhash].bundle.js",
    filename: "[name].[chunkhash].bundle.js"
  }
  </code></pre>
  
  <p>In my devServer section I have this:</p>
  
  <pre><code>devServer: {
    historyApiFallback: true,
    inline: true,
    port: 4000,
    publicPath: "/myapp" // this is so my app is served from http://locahost:4000/myapp 
  }
  </code></pre>
  
  <p>I don't have any issues when I actually deploy to my server, however when I run webpack-dev-server and I access:</p>
  
  <pre><code>http://localhost:4000/myapp
  </code></pre>
  
  <p>...the html is served up, but all the URLs generated for my bundles by <code>HtmlWebpackPlugin</code> are <code>/myapp/static/&lt;bundleName&gt;</code> and therefore fail to fetch as the bundles are being served at <code>/mpapp/&lt;bundleName&gt;</code>.</p>
  
  <p>How can I configure webpack-dev-server to rewrite <code>/myapp/static/&lt;bundleName&gt;</code> to <code>/myapp/&lt;bundleName&gt;</code> so that it will route to the bundles that are actually being served locally under <code>/myapp</code>?</p>
  
  <p>I've tried all manner of rewrite and proxy directives, but I just seem to break the app - I'm sure there's a simple way that I'm overlooking.</p>
  
  <p>Many thanks.</p>