背景
webpackとはjavacsciptやcssや画像ファイルなどwebページの動作に必要なファイルをまとめるプログラムです。nodejsのプログラムをwebpackを利用した開発時に環境変数の利用方法に戸惑ったので、関連情報を記事に残します。
使ったもの
- nodejs v23.11.0
- webpackライブラリ達
"devDependencies": {
"webpack": "^5.98.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.1"
}
webpack.config.jsの書き方
webpack.config.jsで使うPORTと、プログラム内で使うENV_VAL0, ENV_VAL1の設定例です。webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
publicPath: path.resolve(__dirname, 'dist'),
},
mode: 'development',
plugins: [
new webpack.EnvironmentPlugin({
"ENV_VAL0": null,
"ENV_VAL1": null,
}),
],
devServer: {
allowedHosts: "all",
static: ".",
compress: true,
port: process.env.PORT,
devMiddleware: {
writeToDisk: true,
},
server: process.env.HTTPS ? "https" : "http",
},
};
上記の設定を施すと、main.jsでprocess.envとして設定した変数を扱えます。
src/main.js
alert("val is " + process.env.ENV_VAL0 + " and " + process.env.ENV_VAL1);
実行に必要な関連ファイルも示します。
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="dist/bundle.js"></script>
<title>practice webpack env val</title>
</head>
<body>
<p>practice webpack env val</p>
</body>
</html>
package.json
{
"name": "practice-webpack",
"version": "1.0.0",
"devDependencies": {
"webpack": "^5.98.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.1"
}
}
上記のファイルを揃えれば、環境変数で値を設定しつつ実行できます。
npm install
PORT=3002 ENV_VAL0=zero ENV_VAL1=ONE npx --yes webpack serve
PORT=3002を指定しているので http://lcalhost:3002 で下記の表示を確認できます。
期待通りに環境変数で指定した値をwebpackでまとめたjsファイルを通して利用できました。
要所を解説します。
プログラム内で環境変数を呼びたい: EnvironmentPluginで設定
プログラム内で使いたい環境変数は EnvironmentPlugin で変数名を指定します。map形式にすると、環境変数が定義されていなかった際に使う値を設定できます。
定義されてなくても動いて欲しい環境変数はこの形式で設定するのが良いです。
webpack.config.js
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.EnvironmentPlugin({
"ENV_VAL0": null,
"ENV_VAL1": null,
}),
],
};
webpack configで環境変数を使いたい: process.env.変数名
webpack.config.jsはnodejs環境で呼び出されるからか、process.env.変数名で環境変数を呼べます。webpack.config.js
module.exports = {
devServer: {
port: process.env.PORT,
server: process.env.HTTPS ? "https" : "http",
},
};
EnvironmentPluginを利用するのと同等の書き方の紹介でprocess.env.変数名を使っていたので、process.envが使えると分かりました。
webpack env variableとかで検索すると、webpack実行時に--envで変数を指定する方式が出てきたのでprocess.envを直接呼び出せると分かるまでに時間がかかりました。
おわり
webpackでビルドしたjsファイルで環境変数を使う方法と、webpack.config.jsで環境変数を使う方法を把握できました。webpackの勝手が分かっていなくて後者の把握に時間を要しましたが、期待通りに設定できて良かったです。
0 件のコメント :
コメントを投稿