NormalModuleReplacementPlugin

يسمح لك NormalModuleReplacementPlugin باستبدال الموارد التي تطابق resourceRegExp بمورد جديد هو newResource. إذا كان newResource مسارًا نسبيًا، فسيُحل نسبة إلى المورد السابق. وإذا كان newResource دالة، فمن المتوقع أن تعدّل خاصية request في المورد الممرر لها.

يفيد هذا عندما تريد سلوكًا مختلفًا بين builds، مثل استخدام إعدادات مختلفة للتطوير والإنتاج.

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource);

لاحظ أن resourceRegExp يُختبر على request المكتوب في الكود، وليس على المورد بعد حله. مثلًا، إذا كتبت import sum from './sum' فسيُختبر النص './sum' وليس './sum.js'.

انتبه أيضًا عند استخدام Windows إلى اختلاف رمز الفصل بين المجلدات. مثلًا، /src\/environments\/environment\.ts/ لن يعمل على Windows، واستخدم بدلًا منه /src[\\/]environments[\\/]environment\.ts/,.

مثال أساسي

استبدل module محددًا عند البناء لبيئة التطوير أو الإنتاج.

لنفترض أن لديك ملف إعدادات للتطوير باسم some/path/config.development.module.js ونسخة خاصة بالإنتاج باسم some/path/config.production.module.js.

أضف plugin التالي عند البناء للإنتاج:

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

مثال متقدم

بناء مشروط يعتمد على بيئة محددة.

لنفترض أنك تريد إعدادًا يستخدم قيمًا مختلفة حسب هدف البناء.

export default (env) => {
  const appTarget = env.APP_TARGET || "VERSION_A";
  return {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/-APP_TARGET$/, (resource) => {
        resource.request = resource.request.replace(
          /-APP_TARGET/,
          `-${appTarget}`,
        );

        if (resource.createData) {
          resource.createData.request = resource.request;
        }
      }),
    ],
  };
};

أنشئ ملفي الإعدادات التاليين:

app/config-VERSION_A.js

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

app/config-VERSION_B.js

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

بعد ذلك، استورد الإعداد باستخدام الكلمة التي تبحث عنها في regexp:

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'