◆ --config で設定ファイルを選ぶ
◆ --env.foo=bar のように引数を渡して 設定ファイルの中で引数に応じて分岐
◆ --config-name で指定の名前の設定を使用

これまでそこまで使い込んでなかったので 1 ファイルで必要に応じて書き換えてましたが 実行時のコマンドで分けたくなってきたので分けてみました

ファイルを分ける

一番単純なのはファイル自体を分けてしまうことです
設定の重複が少ないなら変に分岐するより完全に別のほうがわかりやすいです

デフォルトの名前じゃなくなるので 実行時に設定ファイルを指定する必要があります

webpack.foo.config.js
webpack.bar.config.js
webpack.baz.config.js

の 3 ファイルがあった場合は このような scripts を package.json に用意すると楽です

{
"scripts": {
"wp-foo": "webpack --config webpack.foo.config.js",
"wp-bar": "webpack --config webpack.bar.config.js",
"wp-baz": "webpack --config webpack.baz.config.js"
}
}

使い方は

yarn wp-foo

と言った感じです

中で分岐する

--config を使わずロードするのはデフォルトの config.json ファイルをロードして 引数に応じて中の処理をわけることもできます
上のようにファイルを分けておいて require するファイルを選ぶこともできますし 差分がちょっとだけなら 部分的に条件演算子でどっちにするか切り替えたりもできます

[webpack.config.js]
module.exports = (env = {}, argv) => {
const common = {
entry: ...,
output: ...,
}

return {
...common,
...{
foo: {
...
},
bar: {
...
},
baz: {
...
},
}[env.mode]
}
}

こういう感じでエクスポートする値を関数にしておきます
引数を見て中の処理を変えれば おっけいです

env は --env で渡せるので こういう scripts にすればそれぞれのモードで設定ファイルを変更できます

{
"scripts": {
"wp-foo": "webpack --env.mode=foo",
"wp-bar": "webpack --env.mode=bar",
"wp-baz": "webpack --env.mode=baz"
}
}

設定の名前を指定して実行

エクスポートする値を関数にすることもできます
その場合 それぞれのオブジェクトに name キーで名前を設定できます
コマンドで --config-name に名前を指定すれば その設定だけを実行できます

関数を使ったものに近いもので 引数に応じてその場でひとつ設定をつくるか 全部のパターンを事前に作っておいて名前に一致するものだけ実行するかです
上で書いた事前にファイルに分けてた場合だと それぞれを require するだけなのでこういう感じです

module.exports = [
{ name: "foo", ...require("./webpack.foo.config.js")},
{ name: "bar", ...require("./webpack.bar.config.js")},
{ name: "baz", ...require("./webpack.baz.config.js")},
]

webpack --config-name=foo

名前を指定しない場合は全部が実行されるので 全部実行したい場合があるなら配列を使う書き方にして そうでないなら関数で良いと思います