webpack で bundle したファイルの中で dotenv を使う場合には dotenv-webpack を用いる必要がある

結論

標題のままとなります。dotenv を用いているファイルを webpack で bundle した場合、そのままですと dotenv が用いられません。そのため、dotenv-webpack を用いる必要があります。

やり方

1. dotenv-webpack をインストールします

--dev オプションを付けてよいですが、ここでは割愛します。

$ npm install dotenv-webpack

または

$ yarn add dotenv-webpack

2. webpack.config.js に設定を書く

require してから、plugins: に書き加えます。以下のようになります。

const Dotenv = require('dotenv-webpack');

module.exports = {
  （省略）
  plugins: [new Dotenv()]
  （省略）
};

感想

webpack 難しすぎ……。