webpackの環境でprocess.env.HOGEを使いたい

Question

前提・実現したいこと

webpackを用いvueでの開発を行なっております。
dotenvのようなライブラリは使わずpackage.jsonのscriptから設定した環境変数をindex.jsファイルの中でprocess.env.HOGEのように取得したいと思っておりますがうまくいきません。

該当のソースコード

//package.json
...
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "env": "HOGE=fuga",
    "env-dev": "npm run env-fire && npm run dev"
  },
...

//webpack.config.js
const webpack = require('webpack');

module.exports = {
  ...
  plugins: [
    new webpack.EnvironmentPlugin({
      HOGE: 'default'
    })
  ],
}

//index.js
console.log(process.env.HOGE) //default

index.jsファイルでpackage.jsonのenv script設定したfugaが取得できることを期待していますが取得できません。
こちらは何故なのでしょうか...申し訳ありませんがご教示いただけると幸いです。
よろしくお願いいたします。

試したこと

package.jsonのscript "env"をset HOGE=fuga || export HOGE=fugaのようにもしましたがうまくいきませんでした。

webpack.config.jsのpluginsでnew webpack.DefinePluginでも試してみましたがうまくいきませんでした。

Comments

[hoshi-takanori]

index.js というのはブラウザ上で動くコードですよね？ その場合、環境変数にはアクセスできません。環境変数は webpack の挙動をコントロールするために使うのだと思います。また、環境変数はプロセスごとなので、scipts で HOGE=fuga しても、その script の実行にしか影響が及ばないはずです。

[span]

ご回答ありがとうございます
index.jsはブラウザで動くコードです…
ではwebpack.config.js自体などには環境変数にアクセスできるのでしょうか？
もしくはそもそもがwebpack環境では独自の環境変数を持たせるのは不可能なのでしょうか…？
申し訳ありませんがご教示いただけると幸いです。

[hoshi-takanori]

webpack は開発環境で動きますので、webpack.config.js から環境変数にアクセスしてビルド時の挙動を変えることは可能です。たぶん、「webpack による js コードのビルド」が何を意味するかを掴みきれてないのでは。ちなみに、環境変数を使って何をしたいのでしょうか？

[span]

やりたい事といたしましてはhoshi-takanoriさんが記述してくださいました「webpack.config.js から環境変数にアクセスしてビルド時の挙動を変える」をしたいと思っております！

ビルド時に設定した環境変数にwebpack.config.jsでアクセスしてその中身によって読み込むenvファイルを読み分けたいというようなことがやりたいです。（dotenvは使わないと書きましたが使おうと思います）

つまりまとめると【ビルド時に設定した環境変数にwebpack.config.jsでアクセスして取得する=>取得したdataを元にdotenvなどで読み込むenvファイルを出し分ける】ということがしたいです。
ご教示いただければ幸いです、よろしくお願いいたしますm(__)m

[hoshi-takanori]

お聞きしたいのは env ファイルを読み分けて、具体的に何をしたいのかということなんですが…。

(「ビルド時の挙動を変える」というのはつまり生成される bundle.js の内容が変わるということで、具体的にはデバッグ情報の有無や、ソースを難読化するかを切り替えたりすることが多いと思います。一方、表示内容の調整とか国際化とか接続先 API サーバーを切り替えるとかは、もちろんビルド時に固定することもできますが、実行時に変更できるようにしておくこともできて、どっちがしたいのでしょうか？ という質問です。)

[span]

内容読み違えており失礼いたしました...
envファイルの中身はとあるサービスで使用するIDが入っているイメージです。
TEST-A環境では.env.TEST_Aファイルに書かれたID
TEST-B環境では.env.TEST_Bファイルに書かれたID
TEST-C環境では.env.TEST_Cファイルに書かれたID
...
を使用するというようにいくつもあるテスト環境に対してそれぞれに対応したIDの出しわけをしたいと考えています。

[hoshi-takanori]

ごめんなさい、分かってなかったのは私の方でした。
Vue にはもともと .env.xxx ファイルに書いた値を process.env 経由で使う仕掛けがあるのですね。
使い方を調べたので、回答欄に書きます。

Answer 1

Vue.js には .env ファイルに書いた VUE_APP_ で始まる名前の変数を process.env 経由で使える仕組みがあるようです。
参考: vue-cli 3.0 で作成したプロジェクトの環境変数(.env)の設定 - Qiita

通常は production (npm run build) の際は .env, development (npm run serve) の際は .env.development というファイルが使われるようですが、それ以外のいろんな .env ファイルを使いたい場合は、例えば .env.test-a や .env.test-b などのファイルに次のように書いて、

NODE_ENV='development'
VUE_APP_TEST_ID='AAA'

package.json の scripts で mode を指定すれば良さそうです。

  "scripts": {
    "serve": "vue-cli-service serve",
    "test-a": "vue-cli-service serve --mode test-a",
    "test-b": "vue-cli-service serve --mode test-b",
    ...
  },

console.log(process.env.VUE_APP_TEST_ID);

参考: Modes and Environment Variables | Vue CLI

(でも、もしかしたら、vue-cli を使ってないと駄目かも…。)