How to rewrite specific urls in webpack-dev-server

I am creating a React app and react-router v4 bundled with Webpack. I am creating asynchronous split points with Webpack for asynchronous load packages for on-demand routes of my app on demand.

Assuming my application is called "myapp", when I deploy it to my server, my static assets should be served from:

/myapp/static/<assetName>

      

        
        
        
      

    

In order for the async package loading to work when deployed to the server, my Webpack config file looks like this:

output: {
  path: path.resolve(__dirname, "build"),
  publicPath: "/myapp/static/",
  chunkFilename: "[name].[chunkhash].bundle.js",
  filename: "[name].[chunkhash].bundle.js"
}

      

        
        
        
      

    

In my devServer section, I have the following:

devServer: {
  historyApiFallback: true,
  inline: true,
  port: 4000,
  publicPath: "/myapp" // this is so my app is served from http://locahost:4000/myapp 
}

      

        
        
        
      

    

I have no problem actually deploying to my server, however, when I run webpack-dev-server and I have access:

http://localhost:4000/myapp

      

        
        
        
      

    

... the html is served, but all the urls generated for my packages HtmlWebpackPlugin

are /myapp/static/<bundleName>

and therefore cannot be retrieved as the packages are being executed in /mpapp/<bundleName>

.

How to configure webpack-dev-server to overwrite /myapp/static/<bundleName>

on /myapp/<bundleName>

that it was going to packets that are actually serviced locally /myapp

?

I've tried all sorts of rewrite and proxy directives, but it just feels like I'm breaking the application - I'm sure there is an easy way I'm overlooking.

Many thanks.