webpack-dev-server+firebase-toolsでローカルのFunctionを呼び出す

#やりたいこと

Firebase Functions を使った Web アプリケーションをローカルで動かしたい。
ただ、Firebase CLIのfirebase serveだと Hosting は HMR どころかホットリロードすらされないので webpack-dev-server を使いたい。

#TL;DR

// firebase.json
{
  "hosting": {
    "rewrites": [{
      "source": "/api/foo",
      "function": "foo"
    }]
  }
}

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:8081'
    }
  }
}

firebase serve --port 8081

#何をやっているのか

webpack のdevServer.proxyを設定して、該当パスへのリクエストをローカルで起動している Firebase Hosting へ流す。
Firebase Hosting は渡ってきたリクエストをrewritesセクションの設定にしたがって Firebase Functions へ流す。

/api/fooとしているのはエンドポイントを追加した際に/api以下に生やしていけばwebpack側にプロキシの設定を追加する必要がなくなるため。

#注意点

あくまでも一部のパスをプロキシしているだけなので、他のリライトルールは適用されない。
そこらへんも全部 Hosting の設定どおりにしたい場合はFirebase CLI の設定と superstatic を使ってリクエストを書き換える必要がある。