webpackで環境変数を切り替えられない時の解決方法

結論から言うとwebpack.config.jsでキャッシュを有効にしていたのが原因でした。

cache: {
    type: 'filesystem',
    buildDependencies: {
        config: [__filename]
    }
},

上記の設定をコメントアウトしたところ、正常に環境変数が切り替わるようになりました。

ディレクトリ構成

root/
   ┣.env/ 
   ┃   ┣prd.js
   ┃   ┗ dev.js
   ┣public/
   ┃   ┣ js/
   ┃   ┗ index.html
   ┗src/ 
   ┃   ┣ js/
   ┃   ┗ index.html
   ┣package.json
   ┗webpack.config.js

package.jsonに以下のようにスクリプト定義しました。

"scripts": {
        "build": "NODE_ENV=dev webpack --mode production",
        "build-prd": "NODE_ENV=prd  webpack --mode production"
},

yarn buildを実行した時は.envの中のdev.jsの中身を環境変数として読み込みます。

yarn build-prdを実行した時は.envの中のprd.jsの中身を環境変数として読み込みます。

ちょっと長いですがwebpack.config.jsの中身です。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
const JsonMinimizerPlugin = require("json-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const ImageminPlugin = require('imagemin-webpack-plugin').default;

const path = require('path');
const environment = process.env.NODE_ENV;

module.exports = {
    mode: "production",
    entry: `./src/js/main.js`,
    // ファイルの出力設定
    output: {
        // 出力ファイル名
        filename: 'js/main.js',
        path: path.resolve(__dirname, 'public'),
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.css',
        }),
        new CopyPlugin({
            patterns: [{
                context: "src",
                from: "**/*",
                to: path.resolve(__dirname, "public")
            },],
        }),
        new ImageminPlugin({
            test: /\.(png|gif|svg)$/i,
            pngquant: {
                quality: '65-80'
            },
            gifsicle: {
                interlaced: false,
                optimizationLevel: 1,
                colors: 256
            },
            svgo: {
            }
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.html$/i,
                type: "asset/resource",
            },
        ],
    },
    optimization: {
        minimize: true,
        minimizer: [
            new HtmlMinimizerPlugin(),
            new TerserPlugin(),
            new CssMinimizerPlugin(),
            new JsonMinimizerPlugin(),
        ],
    },
    devServer: {
        static: "public",
        open: true,
        historyApiFallback: true,
        hot: true
    },
    cache: {
        type: 'filesystem',
        buildDependencies: {
            config: [__filename]
        }
    },
    resolve: {
        alias: {
            userEnv$: path.resolve(__dirname, `.env/${environment}.js`),
        },
    }
};

青字の部分が環境変数を読んでいる箇所、赤字がキャッシュの設定です。

赤字の部分をコメントアウトすることで、環境変数が切り替わらない現象を解消できました。