テスト環境/本番環境でディレクトリ階層が違というプロジェクトがあり、pugの変数をビルドのたびに手動で切り替えるようにしていました。
「nodeでビルドするんだからnodeの環境開発で切り替えれるっしょ！！」
と思ってやってみたらやっぱり出来たので、備忘録として書き残しておきます。
環境
- pug ^3.0.0
- html-webpack-plugin ^4.5.1
- pug-loader ^2.4.0
pugは、pug-loader。html-webpack-pluginを用いてwebpack内でビルドしています。
ここでのミッションは、webpack経由でどうやってpugに環境変数を埋め込むか？です。
（下記の方法はpug出なくても素のhtmlでも可能です。）
pug内に環境変数を埋め込む
plugins:[newHtmlWebpackPlugin({title:'My App',filename:'assets/admin.html'})]これを
plugins:[newHtmlWebpackPlugin({title:'My App',filename:'assets/admin.html',environment:process.env.NODE_ENV})]こうですね。environmentはドキュメントなどにある提供されているプロパティではなく勝手につけたプロパティのようです。
つまり fooでも testでもなんでもOKです。
- var appEnv = htmlWebpackPlugin.options.environment;
pug内で上記のよう先ほど追加したプロパティ経由で process.env.NODE_ENVにアクセスすれば、dev/proでpugを分岐出来ます。
もちろん、コマンドを叩くときはNODE_ENVのセットを忘れずに。
package.json
"dev":"NODE_ENV=development webpack --mode production","build":"NODE_ENV=production webpack --mode production"おまけ HTMLでは？
<bodyclass="<%= htmlWebpackPlugin.options.environment %>">参考サイト
https://stackoverflow.com/questions/39902197/how-can-i-pass-webpack-environment-variables-in-html