CC 4.0 授權

本節內容衍生自以下連結的內容，並受 CC BY 4.0 授權約束。
https://webpack.dev.org.tw/plugins/normal-module-replacement-plugin/
除非另有說明，否則以下內容可視為在原始內容基礎上進行修改和刪除的結果。

NormalModuleReplacementPlugin

NormalModuleReplacementPlugin 允許您將符合 resourceRegExp 的資源替換為 newResource。

new rspack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

如果 newResource 是相對路徑，則會相對於先前的資源解析。

如果 newResource 是一個函數，則預期會覆寫所提供資源的請求屬性。

這對於允許不同建置之間的差異行為非常有用。

提示

請注意，resourceRegExp 會在 beforeResolve 階段針對「請求」進行測試，並在 afterResolve 階段針對「資源」進行測試。

此外，請注意，當使用 Windows 時，您必須適應不同的資料夾分隔符號。例如，/src\/environments\/environment\.ts/ 在 Windows 上無法運作，您必須改用 /src[\\/]environments[\\/]environment\.ts/。

基本範例

在為生產環境建置時替換特定模組。

假設您有一個設定檔 some/path/config.development.js，以及一個用於生產環境的特殊版本，位於 some/path/config.production.js

在為生產環境建置時加入以下外掛

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

進階範例

根據指定的環境進行條件建置。

假設您想要一個針對不同建置目標具有特定值的設定。

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

建立兩個設定檔

app/config-VERSION_A.js

export const config = {
  title: 'I am version A',
};

app/config-VERSION_B.js

export const config = {
  title: 'I am version B',
};

然後使用您在 regexp 中尋找的關鍵字來導入該設定

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

現在，您會根據您正在建置的目標，導入正確的設定

rspack --env APP_TARGET=VERSION_A
=> 'I am version A'

rspack --env APP_TARGET=VERSION_B
=> 'I am version B'

本頁內容

NormalModuleReplacementPlugin#

基本範例#

進階範例#

NormalModuleReplacementPlugin

基本範例

進階範例