Webpack-dev-server with bypass proxy

Question

How to achieve a 'proxy' (similar to grunt-connect-proxy) option with webpack-dev-server ?

I am using webpack and webpack-dev-server with Grunt. A task in Gruntfile.js (below code) is able to start the server on port 8080. I want to add proxy setup for all the backend data requests (context URL /ajax/*).

       "webpack-dev-server": {
        options: {
            webpack: webpackConfig,
            publicPath: "/src/assets"
        },
        start: {
            keepAlive: true,
            watch: true              
        }
    } 

Answer 1

In the webpack config, you can use devServer.proxy like this:

proxy: {
    '/ajax/*': 'http://your.backend/'
}

Answer 2

I ended up using 'grunt-contrib-connect' and 'grunt-connect-proxy' with 'webpack-dev-middleware'. So, I can have proxy middleware to handle all my data requests and webpack middleware to handle static bundle file requests.

    var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
    var mountFolder = function (connect, dir) {
       return connect.static(require('path').resolve(dir));
    };

    var prepareDevWebpackMiddleware = function() {

        webpackConfig.devtool = "eval-source-map";
        var compiler = webpack(require("./webpack.config.js"));

        return webpackDevMiddleware(compiler, {
            publicPath : "/assets"           
       });
    };

---- GRUNT TASK ----

        connect: {
            options: {
                port: 8080,
                hostname: 'localhost',
                livereload : true
            },
            proxies: [{
                context: '/api',
                host: 'localhost',
                port: 8000
            }],
            livereload: {
                options: {
                    middleware: function (connect) {
                        return [
                            prepareDevWebpackMiddleware(),
                            proxySnippet,
                            mountFolder(connect, 'src')
                        ];
                    }
                }
            }
      }