webpackで全域定数（global constants）を使いたい（DefinePlugin）

2018-06-12

webpackを使って開発を進めると必然的にテスト機と商用機で定数を変える必要が出てきます。
その時はDefinePluginと言うのを使い、定数をそれぞれに指定してあげると解決出来ます。
https://webpack.js.org/plugins/define-plugin/

使い方は例えばwebpack.config.production.jsでwebpackのConfigファイルを定義していて、中身は下記のようにしているとします。

"use strict";

const webpack = require('webpack');

module.exports = {
  mode: 'production',
  plugins: [
    new webpack.DefinePlugin({
      "HOGE": JSON.stringify("https://yongjinkim.com"),
      "HOGE_URL": "'https://yongjinkim.com'"
    }),
  ],
};

ここで定義したHOGEとHOGE_URLを使うには下記のようにします。

const hoge = HOGE || 'abc';
const hogeURL = HOGE_URL || 'https://test.com';

function print() {
  console.log(hoge);
  console.log(hogeURL);
}

print();

注意することは、JSON.stringify("xxx")で値を囲むか、そもそも"'xxx'"にすることです。
何故ならば、DefinePluginで定義したValueのところがcompile timeにそのままkeyと置き換わるからです。
それで、webpackの実行はnpx webpack --config ./webpack.config.production.jsで実行すると置き換えてくれます。