webpack
開発サーバー：webpack-dev-server

インストール

webpack-dev-serverはnpmでインストールできます

npm --save-dev webpack-dev-server

今すぐあなたはサーバーを起動することができます

./node_modules/.bin/webpack-dev-server

使い方を簡潔にするために、 package.jsonにスクリプトを追加することができます

// package.json
{
  ...
  "scripts": {
    "start": "webpack-dev-server"
  },
  ...
}

今すぐあなたが使用できるサーバーを実行する

npm run start

webpack-dev-serverはwebpack.config.jsファイルのdevServerセクションに設定されてwebpack.config.jsます。

サーバーのコンテンツベースディレクトリを変更するには、 contentBaseオプションを使用します。構成の例としてrootディレクトリをpublic_html設定すると、次のようになります

let path = require("path");

module.exports = {
  ...
  devServer: {
    contentBase: path.resolve(__dirname, "public_html")
  },
  ...
}

プロキシの使用

webpack-dev-serverは他のサーバにいくつかのリクエストをプロキシすることができます。これは、同じドメインに要求を送信するときにAPIクライアントを開発する場合に便利です。

プロキシは、 proxyパラメータを介して設定されます。

/apiへのリクエストをポート8080でリッスンする他のサービスに渡すdevサーバーの設定例は、次のようになります

// webpack.config.js
module.exports = {
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080"
      }
    }
  }
...
}

リライト

pathRewriteオプションを使用して宛先パスを書き換えることができます。

前の例の/api接頭辞を/apiたいと仮定すると、あなたの設定は次のようになります

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        pathRewrite: {"^/api" : ""}
      }
    }
  }
...

Request /api/user/256はhttp://localhost:8080/user/256変換されhttp://localhost:8080/user/256 。

フィルタ

一部の要求のみをプロキシすることは可能です。 bypassは、リクエストがプロキシされるべきかどうかを返す値を決定する関数を提供することを可能にします。

/apiへのPOST要求のみをプロキシし、残りの部分をwebpack処理させたいと仮定すると、設定は次のようになります

// webpack.config.js
  ...
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        bypass: function(req, res, proxyOptions) {
          if(req.method != 'POST') return false;
        }
      }
    }
  }
...