webpackを使ってdevelopmentとproductionで変数を変更する

javascript Java

TL;DR

webpackを使って開発環境と本番環境で値が違うものをどう変更するか。(ex. url)

import config from "config"

console.log(`${config.url}`)  

// 開発環境では https://hoge.com
// 本番環境では https://fuga.com

webpackのresolve.aliasを使用する

webpackのドキュメント

https://webpack.github.io/docs/configuration.html#resolve-alias

resoleve.aliasはモジュールを他のモジュールまたはパスで置き換えるもの。

webpack.config.js

const environment = process.env.NODE_ENV || 'development';

const config = {
    resolve: {
       alias: {
          config: `${__dirname}/src/js/common/config/${environment}.js`
       }
    }
};

module.exports = config;

development.js

export default {
    candidateUrl : 'http://localhost:8080'
}

staging.js

export default {
    candidateUrl : 'https://hoge.com'
}

production.js

export default {
    candidateUrl : 'http://fuga.com'
}