【webpack速習】vol.12: Environment Variables

下記ページをざっくりとまとめます。

webpack.js.org

※webpackの環境変数は、bashやCMD.exeなどのオペレーティングシステムシェルの環境変数とは異なる

概要

• webpack.config.jsで開発ビルドと本番ビルドを区別するために、環境変数を使うことができる
• コマンドラインで --env を使うと、好きなだけ環境変数を渡すことができる。環境変数はwebpack.config.jsでアクセス可能
  • 例）--env.production または --env.NODE_ENV = local（NODE_ENV は、従来は環境タイプを定義するために使用されていた）

webpack --env.NODE_ENV=local --env.production --progress

• = で割り当てせずにenv変数を設定するとその変数は true になる。
  --env.production は --env.production=true と同じ意味。
• env変数を使用するには、module.exportsを関数に変換する必要がある

▼ webpack.config.js

const path = require('path');

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

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

問題点

上記のようにmodules.exports を関数の形にしてしまうと、webpack-merge で マージできないことが分かった。
そのため実際には cross-env などを使って環境変数を定義した方がよさそう。

cross-envの使い方

インストール

yarn add --dev cross-env

▼ package.json

  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js",
-    "build": "webpack --config webpack.prod.js"
+   "build": "cross-env NODE_ENV=hoge ENV=fuga webpack --config webpack.prod.js"
  },

▼ webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

+ console.log('====================================');
+ console.log(process.env.NODE_ENV); // hoge
+ console.log(process.env.ENV); // fuga
+ console.log('====================================');

module.exports = {
// 略