結論から言うと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`),
},
}
};
青字の部分が環境変数を読んでいる箇所、赤字がキャッシュの設定です。
赤字の部分をコメントアウトすることで、環境変数が切り替わらない現象を解消できました。