webpack-dev-serverで、他のバックエンドサーバーにプロキシする

webpack-dev-serverと、背後に別のサーバーがいた場合を組み合わせたいと思いまして。

要は、一部のパスについては後ろのサーバーにプロキシしたいのです。

そういう設定は可能なようですね。

API

javascript - Webpack-dev-server with bypass proxy - Stack Overflow

設定は、gulpなどでwebpack-dev-serverを作成する時に行います。webpack.config.jsではないようです。

var gulp = require("gulp");
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");

// 省略…

gulp.task("webpack-dev-server", function(callback) {
    var config = Object.create(webpackConfig);
    var compiler = webpack(config);

    new WebpackDevServer(compiler, {
        publicPath: "/" + config.output.publicPath,
		stats: {
			colors: true
		},
        proxy: {
            "/foo/*": "http://localhost:8080/"
        }
    }).listen(9000, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:9000/index.html");

        // keep the server alive or continue?
        callback();
    });
});

プロキシの設定をしているのは、この部分です。

        proxy: {
            "/foo/*": "http://localhost:8080/"
        }

この設定で、「/foo/」へのアクセスは「http://localhost:8080/foo/」へ、「/foo/bar」へのアクセスは「http://localhost:8080/foo/bar」へ転送されます。