webpack --mode production の値を、webpack.confog.js で取得するには

結論

webpack.config.js の module.export に渡すオブジェクトを、(env, argv) を引数に取る関数にし、argv.mode に --mode の値が入っているので、それを取得。

手順

production か development かで、webpack の出力の処理を分けようとしている。

package.json の script 部分

"script" {
  "build-prod": "webpack --mode production",
  "build-dev": "webpack --mode development"
}

次の様に実行したとする。

webpack 実行例

npm run build-prod   # webpack --mode production

modul.exports の中身を、設定情報のオブジェクトではなく、設定情報のオブジェクトを return する function にし、(env,argv)を引数に取らせる。
その引数のうち argv 直下の mode 、つまり argv.mode に、webpack 実行時に --mode で指定した値が入っている。

webpack.config.js

// 単なるオブジェクトではなく、env と argv を引数にとる関数にする。
module.exports = (env, argv) => {
  // argv.mode にmodeの値が入っているので、これを用いて分岐させる。
  console.log(argv.mode);  // production
  return {
    // ビルドの設定情報は return で返す。
  }
}

keijiek

production と develop で webpack.*.js を分ける

プロジェクトルート内に設定ファイルが多くなってしまうのは気になるが、上記のようにして1ファイルに全ての設定を書くより、ファイルを分割して1つあたりを短くした方が分かりやすい、と言われれば確かにそうかも。

プロジェクト内; webpack-merge を導入

npm i -D webpack-merge

package.json; script 内

    "prod": "webpack --config ./webpack.prod.js",
    "dev":  "webpack --config ./webpack.dev.js"

プロジェクトルート; webpack用設定ファイル, 3つ

webpack.common.js      // entry や output など共通部分, 下記2つに merge される側。
webpack.prod.js        // npm run prod で読まれる。console.log 除去等。
webpack.dev.js         // npm run dev で読まれる。devtool でソースマップを付ける。

webpack.prod.js と webpack.dev.js は、おおよそ次のように書く。

webpack.prod.js または webpack.dev.js の書き方概要

// webpack-merge の merge をインポート
const { merge } = require('webpack-merge');
// 共通設定ファイルをインポート
const webpackCommonJs = require('./webpack.common.js');

module.exports = merge(webpackCommonJs, {
  mode: 'development', // または mode: 'production'
  // 共通設定に書くわけにはいかない個別の設定を書く
}

keijiek

development と production で設定を分岐させつつ、config ファイルを1つにまとめる良い方法

プロジェクトルートにて

npx webpack init

プロジェクト内でnpx webpack init というコマンドを打つと、対話式ウィザードにより package.json も tscofig.json も webpack.config.js も自動生成され、必要なパッケージも自動で追加される。

なお、この処理を行うにはパッケージ@webpack-cli/generatorsが必要で、無ければ最初に自動でnpm i -D @webpack-cli/generatorsされる。

これで自動生成されたwebpack.config.jsを見ると、production と development で処理を分岐させるために webpack.config.js をどう書けばよいかが分かったので、メモしておく。

この方法なら、設定ファイルは1個で済むし、記述内容も、共通部分と production 用と develop 用の3パートを、分かりやすく分離させられる。

package.json のスクリプト

webpack で build するための npm script.
特に、production 用のスクリプトで、--node-env=productionと引数を渡している点に注目。

package.json の script

"script" {
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
}

webpack.config.js

構造を抽象化すると、次のような3手順になっている。

process.env.NODE_ENVで引数の中身を取得。
共通設定を記述したオブジェクトを定義。
手順1で得た値で分岐させ、手順2で定義したオブジェクトに個別の設定を追加。そしてretun。

webpack.config.js

const path = require('path');
// そのほか、必要なものをインポート

// 1. `process.env.NODE_ENV`で引数の中身を受け取り、true/false を判定している。
const isProduction = process.env.NODE_ENV == 'production';

// 2. 共通設定が書かれた config オブジェクトを定義
const config ={
    // ここに共通の設定を書く
}

// 3. 手順1で得た値を使って分岐させ、共通設定に個別の設定を追加してから return
module.exports = () => {
    if (isProduction ) {
        config.mode = 'production';
        // production 用の設定を config オブジェクトに追加していく
    } else {
        config.mode = 'development';
        // development 用の設定を config オブジェクトに追加していく
    }
    // 最後に、共通部分にいろいろ書き加えた後の config オブジェクトを返す。
    return config;
}