webpack.config.js側で`--mode`の値によって処理を分岐する

よくあるパターン

package.json

"scripts": {
  "build": "NODE_ENV=production webpack --mode production", //← NODE_ENVという環境変数を作ってる
  "dev": "webpack --mode development",
  ...
}

なんだか冗長に感じませんか？
正直、開発までのレベルだとそんなに困ることはないかと思いますが、それでも依存するファイルやコマンドは分散したくないです。

なので、こんな感じのシンプルなままキープしたい。

package.json

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack --mode development",
  ...
}

公式にありました。

If you want to change the behavior according to the mode variable inside the webpack.config.js, you have to export a function instead of an object:
Mode | webpack

上記ページの公式的な手法としてはこの様になっています。

webpack.config.js

var config = {
  entry: './app.js',
  //...
};
module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    //...
  }

  return config;
};

予め設定用のオブジェクトを定義しておき、--modeの内容（など）を受け取れる関数の形にして、その値からオブジェクトに追加・変更したものをreturnすることで、処理を分岐できるようです。
しかしこの書き方だと、値を更新するのが困難な場合がありますし、個人的にもう少し直感的に読みやすい方がが好きなので下記のようにしてみました。

webpack.config.js

//modeを利用する部分のみ抜粋
module.exports = (env, options) => {
  isCssSourceMapEnabled = options.mode !== 'production' ? true : false
  return {
  　　//...
  　　sourceMap: isCssSourceMapEnabled,
　　}
}

これは--modeがproduction以外の場合のみsourceMapをtrueにする例です。開発中はSCSSのソースマップを出力してほしいけど、本番環境にはソースマップは不要というよくあるお悩みです。
（以前は第一引数からmodeを参照できたようですが、仕様が変更された模様）
もう少し略さず書くとこの様になり、公式の書き方だと少し困難であることがおわかりになると思います。

webpack.config.js

module.exports = (env, options) => {
  isCssSourceMapEnabled = options.mode !== 'production' ? true : false
  return {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            ...
            {
              loader: "sass-loader",
              options: {
                ...
                sourceMap: isCssSourceMapEnabled,

こちらも万能ではなく、変更する部分ごとに変数を定義することになり、変更箇所が多い場合など、向いていない場合もあるかと思います。また予め別のファイルなどで環境変数を定義している場合もあると思います。
少し特殊なWebpack.configの書き方の例として、こんなのもあるということを覚えておくと役立つことがあるかもしれません。