webpackでfirebaseの開発環境・本番環境を切り替える

webpack.DefinePluginというのを使うと、定数を環境に応じて定義することができるので、これを使ってfirebaseのプロジェクト情報を切り替えます。

const webpack = require('webpack');

module.exports = (env, argv) => {
  let plugins = [
    ...
  ];
  let firebaseConfig = {};
  if (argv.mode === 'production') {
    firebaseConfig = {
      apiKey: "**********",
      authDomain: "**********",
      databaseURL: "**********",
      projectId: "**********",
      storageBucket: "**********",
      messagingSenderId: "**********"
    }
  } else {
    firebaseConfig = {
      apiKey: "**********",
      authDomain: "**********",
      databaseURL: "**********",
      projectId: "**********",
      storageBucket: "**********",
      messagingSenderId: "**********"
    }
  }
  const constant = new webpack.DefinePlugin({
    __FB_API_KEY__: JSON.stringify(firebaseConfig.apiKey),
    __FB_AUTH_DOMAIN__: JSON.stringify(firebaseConfig.authDomain),
    __FB_DATABASE_URL__: JSON.stringify(firebaseConfig.databaseURL),
    __FB_PROJECT_ID__: JSON.stringify(firebaseConfig.projectId),
    __FB_STORAGE_BUCKET__: JSON.stringify(firebaseConfig.storageBucket),
    __FB_MESSAGING_SENDER_ID__: JSON.stringify(firebaseConfig.messagingSenderId)
  })
  plugins.push(constant)
  return {
    plugins: plugins,
    ...
  }
}

下記のように設定を読み込めます。

const config = {
  apiKey: __FB_API_KEY__,
  authDomain: __FB_AUTH_DOMAIN__,
  databaseURL: __FB_DATABASE_URL__,
  projectId: __FB_PROJECT_ID__,
  storageBucket: __FB_STORAGE_BUCKET__,
  messagingSenderId: __FB_MESSAGING_SENDER_ID__
}
firebase.initializeApp(config)