webpackによる環境依存の設定ファイル

開発用の設定ファイルと本番用の設定ファイルをwebpackで切り替える方法について。

仕組み

webpack.config.js

plugins: [
  new webpack.ProvidePlugin({
    config: function() {
      if (process.env.NODE_ENV === 'production') {
        return './production.js';
      } else {
        return './development.js';
      }
    }(),
  }),
],

config/development.js

export const url = 'http://localhost:3000/';

config/production.js

export const url = 'http://192.168.0.1:3000/';

config/index.js

export const url = config.url;

eslintを使用している場合、"config"の記述でエラーとなるため、以下を追加する。

.eslintrc

  "globals": {
    "config": true
  }

使用方法

import Config as '../config'

export const test = () => (
  console.log(Config.url)
);