環境変数

webpack.config.jsで、開発と本番環境のビルドを区別するために、環境変数を使用できます。

webpackのコマンドライン環境オプション--envを使用すると、必要な数の環境変数を渡すことができます。環境変数は、webpack.config.jsでアクセスできるようになります。たとえば、--env productionまたは--env goal=localなどです。

npx webpack --env goal=local --env production --progress

webpackの設定には1つ変更を加える必要があります。通常、module.exportsは設定オブジェクトを指します。env変数を使用するには、module.exportsを関数に変換する必要があります。

webpack.config.js

const path = require('path');

module.exports = (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log('Goal: ', env.goal); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};