DefinePlugin

DefinePluginは、コード内の変数を**コンパイル**時に他の値または式で置き換えます。これは、開発ビルドと本番ビルドで異なる動作を許可するのに役立ちます。開発ビルドではログを実行しますが、本番ビルドでは実行しない場合、ログが行われるかどうかを判断するためにグローバル定数を使用できます。それがDefinePluginが活躍するところです。開発ビルドと本番ビルドのルールを設定して、後は忘れてしまえます。

new webpack.DefinePlugin({
  // Definitions...
});

使用方法

DefinePluginに渡される各キーは、識別子、または.で結合された複数の識別子です。

• 値が文字列の場合、コードフラグメントとして使用されます。
• 値が文字列でない場合、文字列化されます（関数を含む）。
• 値がオブジェクトの場合、すべてのキーは同じ方法で定義されます。
• キーの前にtypeofを付けると、typeof呼び出しに対してのみ定義されます。

値はコードにインライン化されるため、冗長な条件を削除する縮小処理が可能になります。

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});

console.log('Running App version ' + VERSION);
if (!BROWSER_SUPPORTS_HTML5) require('html5shiv');

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

縮小なしでwebpackを通過した後、結果は次のようになります。

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

そして、縮小処理後、結果は次のようになります。

console.log('Production log');

機能フラグ

機能フラグを使用して、本番/開発ビルドで機能を有効/無効にします。

new webpack.DefinePlugin({
  NICE_FEATURE: JSON.stringify(true),
  EXPERIMENTAL_FEATURE: JSON.stringify(false),
});

サービスURL

本番/開発ビルドで異なるサービスURLを使用します。

new webpack.DefinePlugin({
  SERVICE_URL: JSON.stringify('https://dev.example.com'),
});

runtimeValueによるランタイム値

function (getterFunction, [string] | true | object) => getterFunction()

ファイルに依存する値を持つ変数を定義し、ファイルシステムでそのようなファイルが変更されたときに再評価することが可能です。これは、そのような監視対象ファイルが変更されたときにwebpackが再ビルドされることを意味します。

webpack.DefinePlugin.runtimeValue関数には2つの引数があります。

• 最初の引数は、定義に割り当てる値を返すfunction(module, key, version)です。

• 2番目の引数は、監視するファイルパスの配列、またはモジュールをキャッシュ不可としてフラグを立てるtrueのいずれかです。5.26.0以降、次のプロパティを持つオブジェクト引数も受け入れることができます。

  • fileDependencies?: string[] 関数が依存するファイルのリスト。
  • contextDependencies?: string[] 関数が依存するディレクトリのリスト。
  • missingDependencies?: string[] 関数が依存する存在しないファイルのリスト。
  • buildDependencies?: string[] 関数が依存するビルド依存関係のリスト。
  • version?: string | () => string 関数のバージョン。

const fileDep = path.resolve(__dirname, 'sample.txt');

new webpack.DefinePlugin({
  BUILT_AT: webpack.DefinePlugin.runtimeValue(Date.now, {
    fileDependencies: [fileDep],
  }),
});

BUILT_ATの値は、ファイルシステムで'sample.txt'が最後に更新された時間（例：1597953013291）になります。