javascript - バイパス プロキシを使用する Webpack-dev-server

Question

webpack-dev-serverで「proxy」( grunt-connect-proxy に似た) オプションを実現するには?

Grunt でwebpackとwebpack-dev-serverを使用しています。Gruntfile.js (以下のコード) のタスクは、ポート 8080 でサーバーを起動できます。すべてのバックエンド データ リクエスト (コンテキスト URL /ajax/*) のプロキシ設定を追加したいと考えています。

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

Answer 1

webpack 構成では、次のように devServer.proxy を使用できます。

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

Answer 2

「grunt-contrib-connect」と「grunt-connect-proxy」を「webpack-dev-middleware」で使用することになりました。したがって、プロキシ ミドルウェアですべてのデータ リクエストを処理し、webpack ミドルウェアで静的なバンドル ファイル リクエストを処理できます。

    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"           
       });
    };

----グラントタスク----

        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')
                        ];
                    }
                }
            }
      }