NormalModuleReplacementPlugin

NormalModuleReplacementPlugin 允許您以 newResource 取代符合 resourceRegExp 的資源。如果 newResource 是相對的，它會相對於前一個資源進行解析。如果 newResource 是函式，則預期它會覆寫所提供資源的請求屬性。

這對於允許在建置之間有不同的行為很有用。

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

請注意，resourceRegExp 是針對您在程式碼中編寫的請求進行測試，而不是解析後的資源。例如，當您有程式碼 import sum from './sum' 時，將使用 './sum' 進行測試，而不是 './sum.js'。

另外請注意，在使用 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}`
          );
        }
      ),
    ],
  };
};

建立兩個組態檔案

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'