NormalModuleReplacementPlugin

NormalModuleReplacementPlugin を使うと、resourceRegExp に一致するリソースを newResource で置き換えることができます。newResource が相対パスの場合、以前のリソースに対する相対パスとして解決されます。newResource が関数の場合、提供されたリソースの request 属性を上書きすることが期待されます。

これは、ビルド間で異なる動作を可能にするのに役立ちます。

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

resourceRegExp は、解決されたリソースではなく、コードに記述したリクエストに対してテストされることに注意してください。たとえば、import sum from './sum' というコードがある場合、'./sum.js' ではなく './sum' がテストに使用されます。

また、Windowsを使用している場合は、異なるフォルダ区切り記号に対応する必要があることに注意してください。たとえば、/src\/environments\/environment\.ts/ はWindowsでは機能しません。代わりに /src[\\/]environments[\\/]environment\.ts/ を使用する必要があります。

基本的な例

開発環境向けにビルドする際に、特定のモジュールを置き換えます。

設定ファイル some/path/config.development.module.js と、本番環境用の特別なバージョンが some/path/config.production.module.js にあるとします。

本番環境向けにビルドする場合は、次のプラグインを追加します

new webpack.NormalModuleReplacementPlugin(
  /some\/path\/config\.development\.js/,
  './config.production.js'
);

高度な例

指定された環境に応じて条件付きでビルドします。

さまざまなビルドターゲットに対して特定の値を持つ設定が必要だとします。

module.exports = function (env) {
  var appTarget = env.APP_TARGET || 'VERSION_A';
  return {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(
        /(.*)-APP_TARGET(\.*)/,
        function (resource) {
          resource.request = resource.request.replace(
            /-APP_TARGET/,
            `-${appTarget}`
          );
        }
      ),
    ],
  };
};

次の2つの設定ファイルを作成します

app/config-VERSION_A.js

export default {
  title: 'I am version A',
};

app/config-VERSION_B.js

export default {
  title: 'I am version B',
};

次に、正規表現で探しているキーワードを使用して、その設定をインポートします

import config from 'app/config-APP_TARGET';
console.log(config.title);

これで、どのターゲットをビルドしているかに応じて、正しい設定がインポートされるようになりました。

npx webpack --env APP_TARGET=VERSION_A
=> 'I am version A'

npx webpack --env APP_TARGET=VERSION_B
=> 'I am version B'