Module

تحدد هذه الخيارات كيفية التعامل مع أنواع مختلفة من modules داخل المشروع.

module.defaultRules

array من القواعد المطبقة افتراضيًا على modules.

راجع كود المصدر للحصول على التفاصيل.

export default {
  module: {
    defaultRules: [
      "...", // you can use "..." to reference those rules applied by webpack by default
    ],
  },
};

بدءًا من webpack 5.87.0، يُسمح للقيم الزائفة بما في ذلك 0، ""، false، null وundefined بالمرور إلى module.defaultRules لتعطيل قواعد معينة بشكل مشروط.

export default {
  module: {
    defaultRules: [
      false &&
        {
          // سيتم تعطيل هذه القاعدة
        },
    ],
  },
};

module.generator

5.12.0+

من الممكن تخصيص جميع خيارات المولدات في مكان واحد باستخدام module.generator.

webpack.config.js

export default {
  module: {
    generator: {
      asset: {
        // خيارات المولد لـ asset modules

        // يشير إلى ما إذا كان يجب التعامل مع asset كثنائي. اضبط على "خطأ" للتعامل معه كنص بدلاً من ذلك. متوفر منذ webpack 5.93.0
        binary: false,

        // خيارات مولد عنوان URL للبيانات.
        dataUrl: {
          // ترميز Asset (الإعداد الافتراضي هو "base64")
          // النوع: 'base64' | كاذبة
          encoding: "base64",
          // Asset mimetype (الحصول على امتداد الملف بشكل افتراضي).
          // النوع: string
          mimetype: "image/png",
        },

        // تنبعث منها output asset من هذا asset module. يمكن ضبط هذا على "خطأ" لحذف انبعاث مثلاً من أجل إصلاح القطاع الأمني.
        // النوع: boolean
        emit: true,

        // تخصيص اسم الملف لهذا asset module
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        filename: "static/[path][name][ext]",

        // تخصيص publicPath لـ asset modules، متاح منذ webpack 5.28.0
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        publicPath: "https://cdn/assets/",

        // قم بإصدار asset في المجلد المحدد المتعلق بـ "output.path"، المتوفر منذ webpack 5.67.0
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        outputPath: "cdn-assets/",
      },
      "asset/inline": {
        // خيارات المولد لـ asset/المضمنة modules

        // يشير إلى ما إذا كان يجب التعامل مع asset كثنائي. اضبط على "خطأ" للتعامل معه كنص بدلاً من ذلك. متوفر منذ webpack 5.93.0
        binary: false,

        // خيارات مولد عنوان URL للبيانات.
        dataUrl: {
          // ترميز Asset (الإعداد الافتراضي هو "base64")
          // النوع: 'base64' | كاذبة
          encoding: "base64",
          // Asset mimetype (الحصول على امتداد الملف بشكل افتراضي).
          // النوع: string
          mimetype: "image/png",
        },
      },
      "asset/resource": {
        // خيارات المولد لـ asset/المورد modules

        // يشير إلى ما إذا كان يجب التعامل مع asset كثنائي. اضبط على "خطأ" للتعامل معه كنص بدلاً من ذلك. متوفر منذ webpack 5.93.0
        binary: false,

        // تنبعث منها output asset من هذا asset module. يمكن ضبط هذا على "خطأ" لحذف انبعاث مثلاً من أجل إصلاح القطاع الأمني.
        // النوع: boolean
        emit: true,

        // تخصيص اسم الملف لهذا asset module
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        filename: "static/[path][name][ext]",

        // تخصيص publicPath لـ asset/المورد modules، متاح منذ webpack 5.28.0
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        publicPath: "https://cdn/assets/",

        // قم بإصدار asset في المجلد المحدد المتعلق بـ "output.path"، المتوفر منذ webpack 5.67.0
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        outputPath: "cdn-assets/",
      },
      "asset/bytes": {
        // لا توجد خيارات مولد مدعومة لهذا النوع module حتى الآن
      },
      javascript: {
        // لا توجد خيارات مولد مدعومة لهذا النوع module حتى الآن
      },
      "javascript/auto": {
        // كما سبق
      },
      "javascript/dynamic": {
        // كما سبق
      },
      "javascript/esm": {
        // كما سبق
      },
      css: {
        // خيارات المولد لـ CSS modules

        // تجنب إنشاء ورقة أنماط وتحميلها وقم فقط بتضمين الصادرات من CSS في ملفات JavaScript output.
        // النوع: boolean، متاح منذ webpack 5.90.0
        exportsOnly: true,

        // تخصيص كيفية تصدير أسماء تصدير CSS إلى javascript modules، مثل الاحتفاظ بها كما هي، وتحويلها إلى حالة الجمل، وما إلى ذلك.
        // النوع: 'كما هو' | 'حالة الجمل' | 'حالة الجمل فقط' | "شرطات" | "شرطات فقط" | ((الاسم: string) => string | string[])
        // متاح منذ webpack 5.90.4؛ قد يُرجع النموذج function string[] منذ 5.107.0
        exportsConvention: "camel-case-only",
      },
      "css/auto": {
        // خيارات المولد لـ css/auto modules

        // تجنب إنشاء ورقة أنماط وتحميلها وقم فقط بتضمين الصادرات من CSS في ملفات JavaScript output.
        // النوع: boolean، متاح منذ webpack 5.90.0
        exportsOnly: true,

        // تخصيص كيفية تصدير أسماء تصدير CSS إلى javascript modules، مثل الاحتفاظ بها كما هي، وتحويلها إلى حالة الجمل، وما إلى ذلك.
        // النوع: 'كما هو' | 'حالة الجمل' | 'حالة الجمل فقط' | "شرطات" | "شرطات فقط" | ((الاسم: string) => string | string[])
        // متاح منذ webpack 5.90.4؛ قد يُرجع النموذج function string[] منذ 5.107.0
        exportsConvention: "camel-case-only",

        // قم بتخصيص تنسيق أسماء الفئات المحلية التي تم إنشاؤها لـ CSS modules.
        // النوع: string، إلى جانب البدائل على مستوى الملف ومستوى Module في https://webpack.js.org/configuration/output/#template-strings, تتضمن أيضًا [uniqueName] و[local].
        // متاح منذ webpack 5.90.4
        localIdentName: "[uniqueName]-[id]-[local]",
      },
      "css/global": {
        // كما سبق
      },
      "css/module": {
        // كما سبق
      },
      json: {
        // خيارات المولد لـ json modules
        // استخدم `JSON.parse` عندما يكون JSON string أطول من 20 حرفًا.
        parse: JSONParse,
      },
      // الآخرين…
    },
  },
};

أسماء مستعارة متعددة عبر `exportsConvention`

5.107.0+

عندما يكون exportsConvention هو function، فقد يُرجع إما string أو string[]. يؤدي إرجاع array إلى تصدير الفئة المحلية تحت كل اسم في array، بما يتوافق مع سلوك css-loader. يعد هذا مفيدًا عندما تريد كشف نفس الفصل تحت عدة أسماء مستعارة دون كتابة قاعدتين.

webpack.config.js

export default {
  experiments: { css: true },
  module: {
    generator: {
      "css/module": {
        // كشف كل فئة تحت اسمها الأصلي واسم مستعار كبير
        exportsConvention: (name) => [name, name.toUpperCase()],
      },
    },
  },
};

import styles from "./button.module.css";

console.log(styles.btn); // hashed class
console.log(styles.BTN); // same hashed class, uppercase alias

module.parser

5.12.0+

كما هو الحال مع module.generator، يمكنك تخصيص جميع خيارات المحلل اللغوي في مكان واحد باستخدام module.parser.

webpack.config.js

export default {
  module: {
    parser: {
      asset: {
        // خيارات المحلل اللغوي لـ asset modules

        // خيارات مولد عنوان URL للبيانات.
        dataUrl: {
          // ترميز Asset (الإعداد الافتراضي هو "base64")
          // النوع: 'base64' | كاذبة
          encoding: "base64",
          // Asset mimetype (الحصول على امتداد الملف بشكل افتراضي).
          // النوع: string
          mimetype: "image/png",
        },

        // تنبعث منها output asset من هذا asset module. يمكن ضبط هذا على "خطأ" لحذف انبعاث مثلاً من أجل إصلاح القطاع الأمني.
        // النوع: boolean
        emit: true,

        // تخصيص اسم الملف لهذا asset module
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        filename: "static/[path][name][ext]",

        // تخصيص publicPath لـ asset modules، متاح منذ webpack 5.28.0
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        publicPath: "https://cdn/assets/",

        // قم بإصدار asset في المجلد المحدد المتعلق بـ "output.path"، المتوفر منذ webpack 5.67.0
        // النوع: string | ((بيانات المسار: بيانات المسار، معلومات الأصول؟: معلومات الأصول) => string)
        outputPath: "cdn-assets/",
      },
      "asset/inline": {
        // لا توجد خيارات محلل مدعومة لهذا النوع module حتى الآن
      },
      "asset/resource": {
        // كما سبق
      },
      "asset/source": {
        // كما سبق
      },
      "asset/bytes": {
        // كما سبق
      },
      javascript: {
        // خيارات المحلل اللغوي لJavaScript modules
        // على سبيل المثال، تمكين تحليل بناء الجملة require.ensure
        requireEnsure: true,
        // اضبط الوضع module على `'strict'` أو `'non-strict'`. يمكن أن يؤثر هذا على سلوك module، حيث تختلف بعض السلوكيات بين الوضع الصارم وغير الصارم.
        overrideStrict: "non-strict",
      },
      "javascript/auto": {
        // كما سبق
      },
      "javascript/dynamic": {
        // كما سبق
      },
      "javascript/esm": {
        // كما سبق
      },
      css: {
        // خيارات المحلل اللغوي لـ CSS modules

        // تمكين/تعطيل التعامل مع القواعد `@import`، وهو متاح منذ webpack 5.97.0
        // النوع: boolean
        import: true,
        // تمكين/تعطيل التعامل مع وظائف url()/image-set()/src()/image()، وهو متاح منذ webpack 5.97.0
        // النوع: boolean
        url: true,
        // استخدم ES modules التصدير المسمى لصادرات CSS، وهو متاح منذ webpack 5.90.0
        // النوع: boolean
        namedExports: true,
        // قم بتخصيص كيفية تصدير محتوى CSS
        // النوع: string
        exportType: "link",
      },
      "css/auto": {
        // كما سبق
      },
      "css/global": {
        // كما سبق
      },
      "css/module": {
        // كما سبق
      },
      // الآخرين…
    },
  },
};

module.parser.css

قم بتخصيص الخيارات للمحلل اللغوي CSS.

export default {
  module: {
    parser: {
      css: {
        // ...
        namedExports: true,
      },
    },
  },
};

module.parser.css.import

يتيح هذا الخيار معالجة قواعد @import في ملفات CSS. عند التعيين على true، تتم معالجة عبارات @import، مما يسمح بالتضمين المعياري للأنماط من ملفات CSS الأخرى.

النوع: boolean
متاح: 5.97.0+

مثال:

export default {
  module: {
    parser: {
      css: {
        import: true,
      },
    },
  },
};

/* reset-styles.css */
body {
  margin: 0;
  padding: 0;
}

/* styles.css */
@import "./reset-styles.css";

body {
  background-color: red;
}

module.parser.css.url

يعمل هذا الخيار على تمكين أو تعطيل معالجة عناوين URL في وظائف مثل url()، وimage-set()، وsrc()، وimage() داخل ملفات CSS. عند التمكين، يتم حل عناوين URL هذه ومعالجتها بواسطة webpack.

النوع: boolean
متاح: 5.97.0+

مثال:

export default {
  module: {
    parser: {
      css: {
        url: true,
      },
    },
  },
};

/* styles.css */
.background {
  background-image: url("./images/bg.jpg");
}

.icon {
  content: image("./icons/star.svg");
}

module.parser.css.namedExports

يتيح هذا الخيار استخدام التصدير المسمى ES modules لعمليات التصدير CSS. عند التعيين على true، سيقوم CSS module بتصدير فئاته وأنماطه باستخدام عمليات التصدير المسماة.

النوع: boolean
متاح: 5.90.0+

مثال:

export default {
  module: {
    parser: {
      css: {
        namedExports: true,
      },
    },
  },
};

عندما يكون namedExports هو false لـ CSS modules، يمكنك استرداد فئات CSS باستخدام طرق استيراد متنوعة. تتم إعادة توجيه عمليات التصدير المسماة لتحسين تجربة المطورين (DX)، مما يسهل الانتقال السلس من عمليات التصدير الافتراضية إلى عمليات التصدير المسماة:

import * as styles from "./styles.module.css";
import styles1 from "./styles.module.css";
import { foo } from "./styles.module.css";

console.log(styles.default.foo); // Access via styles.default
console.log(styles.foo); // Access directly from styles
console.log(styles1.foo); // Access via default import styles1
console.log(foo); // Direct named import

عند تمكين namedExports (السلوك الافتراضي)، يمكنك استخدام فقط عمليات التصدير المسماة لاستيراد فئات CSS.

/* styles.css */
.header {
  color: blue;
}

.footer {
  color: green;
}

import { footer, header } from "./styles.module.css";

من خلال تمكين namedExports، فإنك تتبنى نهجًا أكثر نمطية وقابلية للصيانة لإدارة CSS في مشاريع JavaScript، مع الاستفادة من بناء جملة ES module لعمليات استيراد أكثر وضوحًا ووضوحًا.

module.parser.css.pure

5.107.0+

تمكين الوضع النقي الصارم لـ CSS Modules. يجب أن يحتوي كل محدد على فئة محلية واحدة أو محدد معرف واحد على الأقل؛ وإلا فإن webpack يصدر خطأ build. يعكس هذا الوضع النقي لـ postcss-modules-local-by-default ويساعد في اكتشاف المحددات العامة غير المقصودة مبكرًا.

النوع: boolean
الافتراضي: false
متوفر لـ: css/module وcss/auto (غير معروض لـ css/global، حيث يكون global بشكل افتراضي هو الدلالي المقصود).

webpack.config.js

export default {
  experiments: { css: true },
  module: {
    parser: {
      "css/module": {
        pure: true,
      },
    },
  },
};

تعليقان ينسحبان من الشيك عند الحاجة.

/* cssmodules-pure-ignore */ الذي تم وضعه مباشرة قبل القاعدة يمنع التحقق من تلك القاعدة الفردية. القمع هو حسب القاعدة ولا يتم نشره للأطفال.

/* cssmodules-pure-ignore */
a {
  /* suppressed only for this rule */
  color: blue;
}

/* cssmodules-pure-no-check */ الذي يتم وضعه بين التعليقات البادئة للملف (قبل أي قاعدة) يؤدي إلى تعطيل التحقق من الملف بأكمله.

/* cssmodules-pure-no-check */

a {
  /* would normally fail under pure mode */
  color: red;
}

يتم استثناء بعض البنيات حسب التصميم: يتم التعامل مع القواعد المتداخلة داخل سلف حامل محلي على أنها متوافقة تمامًا، ويتوافق & مع نقاء القاعدة الأصلية، ولا يتم التحقق من محتويات النص @keyframes و@counter-style.

module.parser.css.animation

5.104.0+

تمكين أو تعطيل إعادة تسمية أسماء الرسوم المتحركة @keyframes في CSS modules.

النوع: boolean
الافتراضي: true

webpack.config.js

export default {
  module: {
    parser: {
      css: {
        animation: true, // Enable @keyframes renaming
      },
    },
  },
};

module.parser.css.container

5.104.0+

تمكين أو تعطيل إعادة تسمية أسماء @container في CSS modules.

النوع: boolean
الافتراضي: true

webpack.config.js

export default {
  module: {
    parser: {
      css: {
        container: true, // Enable @container renaming
      },
    },
  },
};

module.parser.css.customIdents

5.104.0+

تمكين أو تعطيل إعادة تسمية المعرفات المخصصة في CSS modules.

النوع: boolean
الافتراضي: true

webpack.config.js

export default {
  module: {
    parser: {
      css: {
        customIdents: true, // Enable custom identifier renaming
      },
    },
  },
};

module.parser.css.dashedIdents

5.104.0+

تمكين أو تعطيل إعادة تسمية المعرفات المتقطعة، مثل CSS الخصائص المخصصة (على سبيل المثال، --my-variable).

النوع: boolean
الافتراضي: true

webpack.config.js

export default {
  module: {
    parser: {
      css: {
        dashedIdents: true, // Enable dashed identifier renaming
      },
    },
  },
};

module.parser.css.function

5.104.0+

تمكين أو تعطيل إعادة تسمية أسماء @function في CSS modules.

النوع: boolean
الافتراضي: true

webpack.config.js

export default {
  module: {
    parser: {
      css: {
        function: true, // Enable @function renaming
      },
    },
  },
};

module.parser.css.grid

5.104.0+

تمكين أو تعطيل إعادة تسمية معرفات الشبكة في CSS modules.

النوع: boolean
الافتراضي: true

webpack.config.js

export default {
  module: {
    parser: {
      css: {
        grid: true, // Enable grid identifier renaming
      },
    },
  },
};

module.parser.css.exportType

قم بتخصيص كيفية تصدير محتوى CSS.

النوع: boolean
متاح: 5.102.0+

مثال:

export default {
  module: {
    parser: {
      css: {
        // ...
        exportType: "text",
      },
    },
  },
};

القيم المحتملة: ``رابط' | "نص" | "ورقة أنماط CSS"

link - استخرج CSS في الملف الخاص واستخدم علامات link لإدخالها في DOM.
text - قم بتخزين CSS في ملف JS وإعادته باستخدام التصدير الافتراضي.
css-style-sheet - التصدير الافتراضي هو ورقة أنماط قابلة للإنشاء (أي CSSStyleSheet). مفيد للعناصر المخصصة وshadow DOM.

module.parser.javascript

تخصيص الخيارات للمحلل اللغوي JavaScript.

export default {
  module: {
    parser: {
      javascript: {
        // ...
        commonjsMagicComments: true,
      },
    },
  },
};

يُسمح بتخصيص هذه الخيارات في Rule.parser بالإضافة إلى target المحددة modules.

module.parser.javascript.anonymousDefaultExportName

5.107.0+

يتحكم في ما إذا كان webpack يضبط .name على "default" لوظائف وفئات التصدير الافتراضية المجهولة، بما يتوافق مع مواصفات ES لـ ESM الأصلي. عند التمكين، يقوم webpack بإدخال مساعد runtime صغير (__webpack_require__.dn) يستدعي Object.defineProperty(...) عند التصدير لتعيين القيمة .name.

النوع: boolean
الافتراضي: true للتطبيقات، false للمكتبات (عند تعيين output.library).

تظل التطبيقات متوافقة مع المواصفات بشكل افتراضي. تتخطى المكتبات المساعد لإبقاء حجم bundle صغيرًا، نظرًا لأن مستهلكي library نادرًا ما يعتمدون على .name === "default".

لتجاوز الافتراضي بشكل صريح:

webpack.config.js

export default {
  module: {
    parser: {
      javascript: {
        anonymousDefaultExportName: false,
      },
    },
  },
};

module.parser.javascript.commonjsMagicComments

تمكين دعم التعليقات السحرية لـ CommonJS.

النوع: boolean
متاح: 5.17.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        commonjsMagicComments: true,
      },
    },
  },
};

لاحظ أن تعليق webpackIgnore فقط هو المعتمد في الوقت الحالي:

const x = require(/* webpackIgnore: true */ "x");

module.parser.javascript.dynamicImportFetchPriority

حدد fetchPriority العامة للاستيراد الديناميكي.

النوع: 'low' | 'high' | 'auto' | false
متاح: 5.87.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        dynamicImportFetchPriority: "high",
      },
    },
  },
};

module.parser.javascript.dynamicImportMode

يحدد الوضع العام للاستيراد الديناميكي.

النوع: 'eager' | 'weak' | 'lazy' | 'lazy-once'
متاح: 5.73.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        dynamicImportMode: "lazy",
      },
    },
  },
};

module.parser.javascript.dynamicImportPrefetch

يحدد الجلب المسبق العالمي للاستيراد الديناميكي.

النوع: number | boolean
متاح: 5.73.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        dynamicImportPrefetch: false,
      },
    },
  },
};

module.parser.javascript.dynamicImportPreload

يحدد التحميل المسبق العام للاستيراد الديناميكي.

النوع: number | boolean
متاح: 5.73.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        dynamicImportPreload: false,
      },
    },
  },
};

module.parser.javascript.exportsPresence

يحدد سلوك أسماء التصدير غير الصالحة في \"import ... from ...\" و\"export ... from ...\".

النوع: 'error' | 'warn' | 'auto' | false
متاح: 5.62.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        exportsPresence: "error",
      },
    },
  },
};

module.parser.javascript.importExportsPresence

يحدد سلوك أسماء التصدير غير الصالحة في \"import ... from ...\".

النوع: 'error' | 'warn' | 'auto' | false
متاح: 5.62.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        importExportsPresence: "error",
      },
    },
  },
};

module.parser.javascript.importMeta

يتحكم في كيفية تقييم webpack لتعبيرات import.meta أثناء التجميع.

النوع: boolean | 'preserve-unknown'
الافتراضي: true
متاح: 5.68.0+

القيم المقبولة:

true - webpack يقوم بتقييم خصائص import.meta المعروفة (على سبيل المثال import.meta.url، import.meta.webpackHot)؛ يعتمد سلوك الخصائص غير المعروفة على تخصيصات أخرى (مثل output.module).
false - تعطيل كافة تقييمات import.meta؛ webpack يترك التعبيرات كما هي.
'preserve-unknown' 5.105.0+ - يتم تقييم الخصائص المعروفة كالمعتاد ولكن يحتفظ بأي خصائص غير قياسية حرفيًا في output بدلاً من إزالتها.

مثال - تعطيل تقييم import.meta بالكامل:

export default {
  module: {
    parser: {
      javascript: {
        importMeta: false,
      },
    },
  },
};

مثال - الحفاظ على خصائص import.meta المخصصة دون تمكين output.module:

// webpack.config.js
export default {
  module: {
    parser: {
      javascript: {
        importMeta: "preserve-unknown",
      },
    },
  },
};

باستخدام هذا التخصيص، يتم الاحتفاظ بالخصائص المخصصة على import.meta التي تم تعيينها بواسطة الأداة build أو runtime في output الذي تم إنشاؤه:

// يتم تعيين import.meta.customProp خارجيًا (على سبيل المثال بواسطة أداة build أو runtime)
if (import.meta.customProp) {
  console.log(import.meta.customProp);
}

module.parser.javascript.importMetaContext

تمكين/تعطيل تقييم import.meta.webpackContext.

النوع: boolean
متاح: 5.70.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        importMetaContext: true,
      },
    },
  },
};

module.parser.javascript.overrideStrict

اضبط الوضع module على 'strict' أو 'non-strict'. يمكن أن يؤثر هذا على سلوك module، حيث تختلف بعض السلوكيات بين الوضع الصارم وغير الصارم.

النوع: 'strict' | 'non-strict'
متاح: 5.93.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        overrideStrict: "non-strict",
      },
    },
  },
};

module.parser.javascript.reexportExportsPresence

يحدد سلوك أسماء التصدير غير الصالحة في \"export ... from ...\". قد يكون من المفيد تعطيل هذا أثناء الترحيل من \"export ... from ...\" إلى \"export type ... from ...\" عند إعادة تصدير الأنواع في TypeScript.

النوع: 'error' | 'warn' | 'auto' | false
متاح: 5.62.0+

مثال:

export default {
  module: {
    parser: {
      javascript: {
        reexportExportsPresence: "error",
      },
    },
  },
};

module.parser.javascript.url

تمكين تحليل بناء الجملة new URL().

النوع: boolean = true | 'relative'

مثال:

export default {
  module: {
    parser: {
      javascript: {
        url: false, // disable parsing of `new URL()` syntax
      },
    },
  },
};

قيمة 'relative' لـ module.parser.javascript.url متاحة منذ webpack 5.23.0. عند استخدامه، سيؤدي webpack إلى إنشاء عناوين URL نسبية لبناء جملة new URL()، أي أنه لا يوجد عنوان URL أساسي مضمن في عنوان URL للنتيجة:

<!-- with 'relative' -->
<img src="c43188443804f1b1f534.svg" />

<!-- without 'relative' -->
<img src="file:///path/to/project/dist/c43188443804f1b1f534.svg" />

يعد هذا مفيدًا لـ SSR (العرض الجانبي Server) عندما لا يكون عنوان URL الأساسي معروفًا بواسطة server (ويحفظ بضعة بايتات). لكي تكون متطابقة، يجب أيضًا استخدامها لـ client build.
أيضًا لمولدات المواقع الثابتة، mini-css-plugin وhtml-plugin، وما إلى ذلك حيث تكون هناك حاجة عادةً إلى العرض الجانبي server.

module.parser.javascript.parse

5.103.0+

استخدم تحليل JavaScript مخصص function بدلاً من المحلل اللغوي المدمج في webpack.

قم بإرجاع ast وcomments وsemicolons للتأكد من أن تحليل AST الخاص بـ webpack يعمل بشكل صحيح.

يجب أن يكون ast متوافقًا مع EStree.
comments هو array من عقد تعليق ESTree.
semicolons عبارة عن مجموعة من المواضع حيث يقوم المحلل بإدراج فاصلة منقوطة.
النوع: (code: string, options: ParseOptions) => ParseResult

مثال:

export default {
  module: {
    parser: {
      javascript: {
        parse: (code, options) => {
          const comments = [];
          const semicolons = new Set();
          const onInsertedSemicolon = (pos) => semicolons.add(pos);

          const parseOptions = {
            ...options,
            module: options.sourceType === "module",
            loc: options.locations,
            onComment: options.comments ? comments : undefined,
            onInsertedSemicolon: options.semicolons
              ? onInsertedSemicolon
              : undefined,
          };

          const ast = meriyah.parse(code, parseOptions);
          return { ast, comments, semicolons };
        },
      },
    },
  },
};

module.parser.json

تخصيص الخيارات لمحلل json.

export default {
  module: {
    parser: {
      json: {
        // خيارات
      },
    },
  },
};

module.parser.json.exportsDepth

عمق json dependency تم وضع علامة عليه كـ exportInfo.

تعتمد القيمة الافتراضية لـ module.parser.json.exportsDepth على mode:

Mode	الافتراضي
`"production"`	`Infinity`
`"development"`	`1`
`"none"`	`Infinity`

النوع: number
متاح: 5.98.0+
مثال:

export default {
  module: {
    parser: {
      json: {
        // على سبيل المثال، بالنسبة إلى json التالي
        // {
        //   "depth_1": {
        //     "depth_2": {
        //       "depth_3": "foo"
        //     }
        //   },
        //   "_depth_1": "bar"
        // }
        // عندما لا يتم وضع علامة على `exportsDepth: 1` و`depth_2` و`depth_3` كـ `exportInfo`.
        exportsDepth: 1,
      },
    },
  },
};

module.parser.json.namedExports

السماح بالتصدير المُسمى لنوع json من النوع object.

النوع: boolean
متاح: 5.103.0+
مثال:

export default {
  module: {
    parser: {
      json: {
        // مثال:
        // استيراد { myField } من "./file.json"؛
        //
        // console.log(myField);
        namedExports: true,
      },
    },
  },
};

module.parser.json.parse

Function لمحلل المحتوى والعودة JSON.

النوع: ((input: string) => Buffer | JsonValue)
مثال:

import json5 from "json5";

export default {
  module: {
    parser: {
      json: {
        parse: json5.parse,
      },
    },
  },
};

module.noParse

RegExp [RegExp] function(resource) string [string]

منع webpack من تحليل أي ملفات تطابق التعبير (التعبيرات) العادية المحددة. لا ينبغي أن تحتوي الملفات التي تم تجاهلها على استدعاءات لـ import، require، define أو أي آلية استيراد أخرى. يمكن أن يؤدي هذا إلى تعزيز build performance عند تجاهل المكتبات الكبيرة.

يمكن أيضًا استخدام noParse كطريقة لمنع توسيع جميع المكالمات import، require، define وما إلى ذلك بشكل متعمد في الحالات التي لا يمكن الوصول فيها إلى هذه المكالمات على runtime. على سبيل المثال، عند إنشاء مشروع لـ 'browser' target واستخدام جهة خارجية library تم إنشاؤها مسبقًا لكل من browser وNode.js ويتطلب Node.js مدمجًا، على سبيل المثال، require('os').

webpack.config.js

export default {
  // ...
  module: {
    noParse: /jquery|lodash|src[\\/]vendor[\\/]somelib/,
  },
};

export default {
  // ...
  module: {
    noParse: (content) =>
      /jquery|lodash|src[\\/]vendor[\\/]somelib/.test(content),
  },
};

module.unsafeCache

boolean function (module)

Cache حل طلبات module. هناك بضعة إعدادات افتراضية لـ module.unsafeCache:

false إذا تم تعطيل cache.
true إذا تم تمكين cache ويبدو أن module يأتي من node_modules، وfalse بخلاف ذلك.

webpack.config.js

export default {
  // ...
  module: {
    unsafeCache: false,
  },
};

module.rules

(Rule | undefined | null | false | "" | 0 | "...")[]

array من القواعد والتي تتطابق مع الطلبات عند إنشاء modules. يمكن لهذه القواعد تعديل كيفية إنشاء module. يمكنهم تطبيق loaders على module أو تعديل المحلل اللغوي.

اعتبارًا من webpack 5.87.0، يمكن استخدام القيم الزائفة مثل false، undefined، null و0 لتعطيل القاعدة بشكل مشروط.

القاعدة

object

يمكن تقسيم القاعدة إلى ثلاثة أجزاء - الشروط والنتائج والقواعد المتداخلة.

شروط القاعدة

هناك قيمتان مدخلتان للشروط:

المورد: المسار المطلق للملف المطلوب. لقد تم حل المشكلة بالفعل وفقًا لـ resolve القواعد.
المُصدر: المسار المطلق لملف module الذي طلب المورد. إنه موقع الاستيراد.

مثال: عندما نكون import './style.css' ضمن app.js، يكون المورد /path/to/style.css وجهة الإصدار هي /path/to/app.js.

في القاعدة، تتم مطابقة الخصائص test، include، exclude وresource مع المورد ويتم مطابقة الخاصية issuer مع المُصدر.

عند استخدام شروط متعددة، يجب أن تتطابق جميع الشروط.

نتائج القاعدة

يتم استخدام نتائج القاعدة فقط عندما يتطابق شرط القاعدة.

هناك قيمتان output للقاعدة:

تم تطبيق loaders: تم تطبيق array من loaders على المورد.
خيارات المحلل اللغوي: الخيارات object التي يجب استخدامها لإنشاء المحلل اللغوي لهذا module.

تؤثر هذه الخصائص على loaders: loader، options، use.

للتوافق أيضًا هذه الخصائص: query, loaders.

تؤثر الخاصية enforce على الفئة loader. سواء كان ذلك طبيعيًا أو قبل أو بعد loader.

تؤثر الخاصية parser على خيارات المحلل اللغوي.

قواعد متداخلة

يمكن تحديد القواعد المتداخلة ضمن الخصائص rules وoneOf.

يتم تقييم هذه القواعد فقط عندما يتطابق شرط القاعدة الأصلية. يمكن أن تحتوي كل قاعدة متداخلة على شروطها الخاصة.

ترتيب التقييم هو كما يلي:

القاعدة الأم
rules
oneOf

Rule.assert

Condition الذي يسمح لك بمطابقة تأكيد الاستيراد لـ dependency وتطبيق قواعد محددة بناءً على نوع التأكيد.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        // يعالج عمليات الاستيراد مع التأكيد "assert { type: 'json' }"
        assert: { type: "json" },
        loader: import.meta.resolve("./loader-assert.js"),
      },
    ],
  },
};

index.js

import one from "./pkg-1.json" assert { type: "json" };

في هذا المثال، يتم استخدام Rule.assert لتطبيق loader-assert.js على أي module تم استيراده مع التأكيد assert { type: "json" }، مما يضمن معالجة ملفات JSON بشكل صحيح.

Rule.compiler

Condition الذي يسمح لك بمطابقة اسم الطفل compiler.

webpack.config.js

export default {
  // ...
  name: "compiler",
  module: {
    rules: [
      {
        test: /a\.js$/,
        compiler: "compiler", // Matches the "compiler" name, loader will be applied
        use: "./loader",
      },
      {
        test: /b\.js$/,
        compiler: "other-compiler", // Does not match the "compiler" name, loader will NOT be applied
        use: "./loader",
      },
    ],
  },
};

Rule.enforce

string

القيم المحتملة: 'pre' | 'post'

يحدد فئة loader. لا توجد قيمة تعني عادي loader.

هناك أيضًا فئة إضافية "مضمنة loader" والتي يتم تطبيقها loaders ضمن عملية الاستيراد/الطلب.

هناك مرحلتان تدخلهما جميع loaders واحدة تلو الأخرى:

مرحلة العرض: يتم استدعاء طريقة العرض على loaders بالترتيب post, inline, normal, pre. راجع الترويج Loader للحصول على التفاصيل.
المرحلة العادية: يتم تنفيذ الطريقة العادية على loaders بالترتيب pre, normal, inline, post. يحدث التحويل على الكود المصدري لـ module في هذه المرحلة.

يمكن حذف (تجاوز) كل loaders العادي عن طريق البادئة ! في الطلب.

يمكن حذف (تجاوز) كل ما هو عادي وما قبل loaders عن طريق البادئة -! في الطلب.

يمكن حذف (تجاوز) كل ما هو عادي وما بعد وما قبل loaders عن طريق البادئة !! في الطلب.

// تعطيل عادي loaders
import { a } from "!./file1.js";

// تعطيل التحميل المسبق والعادي loaders
import { b } from "-!./file2.js";

// تعطيل الكل loaders
import { c } from "!!./file3.js";

لا ينبغي استخدام البادئات المضمنة loaders و! لأنها غير قياسية. يمكن استخدامها بواسطة الكود الذي تم إنشاؤه loader.

Rule.exclude

استبعاد كافة modules المطابقة لأي من هذه الشروط. إذا قمت بتوفير خيار Rule.exclude، فلن تتمكن أيضًا من توفير Rule.resource. راجع Rule.resource وCondition.exclude للحصول على التفاصيل.

Rule.include

قم بتضمين جميع modules المطابقة لأي من هذه الشروط. إذا قمت بتوفير خيار Rule.include، فلن تتمكن أيضًا من توفير Rule.resource. راجع Rule.resource وCondition.include للحصول على التفاصيل.

Rule.issuer

A Condition للمطابقة مع module الذي أصدر الطلب. في المثال التالي، سيكون issuer للطلب a.js هو المسار إلى الملف index.js.

index.js

import A from "./a.js";

يمكن استخدام هذا الخيار لتطبيق loaders على dependencies لـ module محدد أو مجموعة modules.

Rule.issuerLayer

يسمح بالتصفية/المطابقة حسب طبقة المُصدر.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        issuerLayer: "other-layer",
      },
    ],
  },
};

Rule.layer

string

حدد الطبقة التي يجب وضع module فيها. يمكن دمج مجموعة modules في طبقة واحدة يمكن استخدامها بعد ذلك في تقسيم chunks، stats أو entry خيارات.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        test: /module-layer-change/,
        layer: "layer",
      },
    ],
  },
};

Rule.extractSourceMap

boolean = false

يستخرج بيانات Source Map الموجودة من الملفات (من تعليق //# sourceMappingURL)، وهو مفيد للحفاظ على Source Maps لمكتبات الجهات الخارجية.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        extractSourceMap: true,
      },
    ],
  },
};

Rule.loader

Rule.loader هو اختصار لـ Rule.use: [ { loader } ]. راجع Rule.use وUseEntry.loader للحصول على التفاصيل.

Rule.loaders

Rule.loaders هو اسم مستعار لـ Rule.use. راجع Rule.use للحصول على التفاصيل.

Rule.mimetype

يمكنك مطابقة قواعد التخصيص مع URI للبيانات باستخدام mimetype.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        mimetype: "application/json",
        type: "json",
      },
    ],
  },
};

تم بالفعل تضمين application/json وtext/javascript وapplication/javascript وapplication/node وapplication/wasm افتراضيًا كنوع mimetype.

Rule.oneOf

array من Rules يتم استخدام القاعدة المطابقة الأولى منها فقط عندما تتطابق القاعدة.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        oneOf: [
          {
            resourceQuery: /inline/, // foo.css?inline
            type: "asset/inline",
          },
          {
            resourceQuery: /external/, // foo.css?external
            type: "asset/resource",
          },
        ],
      },
    ],
  },
};

Rule.options / Rule.query

Rule.options وRule.query هما اختصاران لـ Rule.use: [ { options } ]. راجع Rule.use وUseEntry.options للحصول على التفاصيل.

Rule.parser

object مع خيارات المحلل اللغوي. يتم دمج كافة خيارات المحلل اللغوي المطبقة.

يمكن للموزعين فحص هذه الخيارات وتعطيلها أو إعادة تخصيصها وفقًا لذلك. معظم القيم الافتراضية plugins تفسر القيم كما يلي:

يؤدي تعيين الخيار إلى false إلى تعطيل المحلل اللغوي.
يؤدي تعيين الخيار إلى true أو تركه undefined إلى تمكين المحلل اللغوي.

ومع ذلك، قد يقبل المحلل اللغوي plugins أكثر من boolean فقط. على سبيل المثال، يمكن أن يقبل NodeStuffPlugin الداخلي object بدلاً من true لإضافة خيارات إضافية لقاعدة معينة.

أمثلة (خيارات المحلل اللغوي بشكل افتراضي plugins):

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  module: {
    rules: [
      {
        // ...
        parser: {
          amd: false, // disable AMD
          commonjs: false, // disable CommonJS
          system: false, // disable SystemJS
          harmony: false, // disable ES2015 Harmony import/export
          requireInclude: false, // disable require.include
          requireEnsure: false, // disable require.ensure
          requireContext: false, // disable require.context
          browserify: false, // disable special handling of Browserify bundles
          requireJs: false, // disable requirejs.*
          commonjsMagicComments: false, // disable magic comments support for CommonJS
          node: {}, // reconfigure node layer on module level
          // or
          // node: false, // تعطيل __dirname و__filename وما إلى ذلك.
          worker: ["default from web-worker", "..."], // Customize the WebWorker handling for javascript files, "..." refers to the defaults.
        },
      },
    ],
  },
};

إذا كان Rule.type هو asset، فقد يكون خيار Rules.parser هو object أو function الذي يصف شرطًا سواءً لتشفير محتويات الملف إلى Base64 أو إرساله كملف منفصل إلى الدليل output.

إذا كان Rule.type هو asset أو asset/inline، فقد يكون خيار Rule.generator هو object الذي يصف تشفير مصدر module أو function الذي يقوم بتشفير مصدر module بواسطة خوارزمية مخصصة.

راجع Asset Modules دليل للحصول على معلومات إضافية وحالات الاستخدام.

Rule.parser.dataUrlCondition

object = { maxSize number = 8096 } function (source, { filename, module }) => boolean

إذا كان حجم المصدر module أقل من maxSize، فسيتم إدخال module في bundle باعتباره string مشفرًا بـ Base64، وإلا فسيتم إرسال ملف module إلى الدليل output.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        // ...
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};

عندما يتم إعطاء function، فإن true يخبر webpack بإدخال module في bundle كـ Base64-encoded string، وإلا فسيتم إصدار ملف module إلى الدليل output.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        // ...
        parser: {
          dataUrlCondition: (source, { filename, module }) => {
            const content = source.toString();
            return content.includes("some marker");
          },
        },
      },
    ],
  },
};

Rule.generator

Rule.generator.dataUrl

object = { encoding string = 'base64' | false, mimetype string = undefined | false } function (content, { filename, module }) => string

عند استخدام Rule.generator.dataUrl كـ object، يمكنك تخصيص خاصيتين:

الترميز: عند التعيين على 'base64'، سيتم تشفير المصدر module باستخدام خوارزمية Base64. سيؤدي ضبط encoding على خطأ إلى تعطيل التشفير.
mimetype: نوع mime لـ URI للبيانات. يتم الحل من امتداد المورد module بشكل افتراضي.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        // ...
        generator: {
          dataUrl: {
            encoding: "base64",
            mimetype: "mimetype/png",
          },
        },
      },
    ],
  },
};

عند استخدامه كـ function، فإنه يتم تنفيذه لكل module ويجب أن يُرجع URI للبيانات string.

export default {
  // ...
  module: {
    rules: [
      {
        // ...
        generator: {
          dataUrl: (content) => {
            const svgToMiniDataURI = require("mini-svg-data-uri");

            if (typeof content !== "string") {
              content = content.toString();
            }
            return svgToMiniDataURI(content);
          },
        },
      },
    ],
  },
};

Rule.generator.emit

قم بإلغاء الاشتراك في كتابة assets من Asset Modules، وقد ترغب في استخدامها في حالات العرض الجانبية Server.

النوع: boolean = true
متاح: 5.25.0+

مثال:

export default {
  // …
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: "asset/resource",
        generator: {
          emit: false,
        },
      },
    ],
  },
};

Rule.generator.filename

نفس output.assetModuleFilename ولكن لقاعدة محددة. يتجاوز output.assetModuleFilename ويعمل فقط مع النوعين asset وasset/resource module.

webpack.config.js

export default {
  // ...
  output: {
    assetModuleFilename: "images/[hash][ext][query]",
  },
  module: {
    rules: [
      {
        test: /\.png$/,
        type: "asset/resource",
      },
      {
        test: /\.html$/,
        type: "asset/resource",
        generator: {
          filename: "static/[hash][ext]",
        },
      },
    ],
  },
};

Rule.generator.publicPath

قم بتخصيص publicPath لـ Asset Modules محدد.

النوع: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
متاح: 5.28.0+

export default {
  // ...
  output: {
    publicPath: "static/",
  },
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: "asset/resource",
        generator: {
          publicPath: "assets/",
        },
      },
    ],
  },
};

Rule.generator.outputPath

قم بإصدار asset في المجلد المحدد بالنسبة إلى "output.path". يجب أن يكون هذا مطلوبًا فقط عند تحديد "publicPath" المخصص لمطابقة بنية المجلد هناك.

النوع: string | ((pathData: PathData, assetInfo?: AssetInfo) => string)
متاح: 5.67.0+

export default {
  // ...
  output: {
    publicPath: "static/",
  },
  module: {
    rules: [
      {
        test: /\.png$/i,
        type: "asset/resource",
        generator: {
          publicPath: "https://cdn/assets/",
          outputPath: "cdn-assets/",
        },
      },
    ],
  },
};

Rule.resource

A Condition متطابق مع المورد. راجع التفاصيل في Rule الشروط.

Rule.resourceQuery

A Condition متطابق مع استعلام المورد. يُستخدم هذا الخيار للاختبار مقابل قسم الاستعلام الخاص بالطلب string (أي من علامة الاستفهام فصاعدًا). إذا كنت تريد import Foo from './foo.css?inline'، فسوف يتطابق الشرط التالي:

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        resourceQuery: /inline/,
        type: "asset/inline",
      },
    ],
  },
};

Rule.parser.parse

function(input) => string | object

إذا تم تعيين Rule.type على 'json'، فقد يكون خيار Rules.parser.parse هو function الذي ينفذ منطقًا مخصصًا لتحليل مصدر module وتحويله إلى JavaScript object. قد يكون من المفيد استيراد toml، yaml وملفات أخرى غير JSON كـ JSON، بدون loaders محدد:

webpack.config.js

import toml from "toml";

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.toml/,
        type: "json",
        parser: {
          parse: toml.parse,
        },
      },
    ],
  },
};

Rule.rules

array من Rules يتم استخدامه أيضًا عندما تتطابق القاعدة.

Rule.scheme

قم بمطابقة المخطط المستخدم، على سبيل المثال، data، http.

النوع: string | RegExp | ((value: string) => boolean) | RuleSetLogicalConditions | RuleSetCondition[]
متاح: 5.38.0+

webpack.config.js

export default {
  module: {
    rules: [
      {
        scheme: "data",
        type: "asset/resource",
      },
    ],
  },
};

Rule.sideEffects

bool

أشر إلى أجزاء module التي تحتوي على آثار جانبية. راجع Tree Shaking للحصول على التفاصيل.

Rule.test

قم بتضمين جميع modules التي اجتازت تأكيد الاختبار. إذا قمت بتوفير خيار Rule.test، فلن تتمكن أيضًا من توفير Rule.resource. راجع Rule.resource وCondition للحصول على التفاصيل.

Rule.type

string

Rule.type يضبط النوع للمطابقة module. يؤدي هذا إلى منع حدوث القواعد الافتراضية وسلوكيات الاستيراد الافتراضية الخاصة بها. على سبيل المثال، إذا كنت تريد تحميل ملف .json من خلال loader مخصص، فستحتاج إلى تعيين type على javascript/auto لتجاوز استيراد json المدمج في webpack.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.json$/,
        type: "javascript/auto",
        loader: "custom-json-loader",
      },
    ],
  },
};

راجع Asset Modules دليل لمزيد من المعلومات حول نوع asset*.

المغلق/تلقائي

5.87.0+

راجع حالة استخدام النوع css/auto module هنا. تأكد من تمكين experiments.css لاستخدام css/auto.

export default {
  target: "web",
  mode: "development",
  experiments: {
    css: true,
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: "less-loader",
        type: "css/auto",
      },
    ],
  },
};

Rule.use

[UseEntry] function(info)

بدءًا من webpack 5.87.0 يمكن استخدام القيم الزائفة مثل undefined null لتعطيل الاستخدام المحدد entry بشكل مشروط.

[UseEntry]

Rule.use يمكن أن يكون array من UseEntry والتي يتم تطبيقها على modules. يحدد كل entry loader ليتم استخدامه.

يعد تمرير string (أي use: [ 'style-loader' ]) اختصارًا للخاصية loader (أي use: [ { loader: 'style-loader '} ]).

يمكن ربط loaders بتمرير عدة loaders، والتي سيتم تطبيقها من اليمين إلى اليسار (من الأخير إلى الأول).

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        // ...
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importloaders: 1,
            },
          },
          {
            loader: "less-loader",
            options: {
              noIeCompat: true,
            },
          },
        ],
      },
    ],
  },
};

function(info)

يمكن أن يكون Rule.use أيضًا function الذي يستقبل الوسيطة object التي تصف module الجاري تحميلها، ويجب أن يُرجع array من عناصر UseEntry.

تحتوي المعلمة info object على الحقول التالية:

compiler: التيار webpack compiler (يمكن أن يكون غير محدد)
issuer: المسار إلى module الذي يقوم باستيراد module الجاري تحميله
realResource: يتم دائمًا تحميل المسار إلى module
resource: المسار إلى module الذي يتم تحميله، عادةً ما يساوي realResource إلا عندما تتم الكتابة فوق اسم المورد عبر !=! في الطلب string

يمكن استخدام نفس الاختصار مثل array للقيمة المرجعة (أي use: [ 'style-loader' ]).

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        use: (info) => [
          {
            loader: "custom-svg-loader",
          },
          {
            loader: "svgo-loader",
            options: {
              plugins: [
                {
                  cleanupIDs: {
                    prefix: basename(info.resource),
                  },
                },
              ],
            },
          },
        ],
      },
    ],
  },
};

راجع UseEntry للحصول على التفاصيل.

Rule.resolve

يمكن تخصيص الحل على مستوى module. اطلع على جميع الخيارات المتاحة على resolve صفحة التخصيص. يتم دمج جميع خيارات resolve المطبقة بعمق مع المستوى الأعلى resolve.

على سبيل المثال، لنتخيل أن لدينا entry في ./src/index.js، ./src/footer/default.js و./src/footer/overridden.js لتوضيح المستوى module resolve.

./src/index.js

import footer from "footer";

console.log(footer);

./src/footer/default.js

export default "default footer";

./src/footer/overridden.js

export default "overridden footer";

webpack.js.org

export default {
  resolve: {
    alias: {
      footer: "./footer/default.js",
    },
  },
};

عند إنشاء bundle بهذا التخصيص، فإن console.log(footer) سيكون output "التذييل الافتراضي". لنقم بتعيين Rule.resolve لملفات .js، والاسم المستعار footer إلى overridden.js.

webpack.js.org

export default {
  resolve: {
    alias: {
      footer: "./footer/default.js",
    },
  },
  module: {
    rules: [
      {
        resolve: {
          alias: {
            footer: "./footer/overridden.js",
          },
        },
      },
    ],
  },
};

عند إنشاء bundle بتخصيص محدث، فإن console.log(footer) سوف output "تجاوز التذييل".

resolve.fullySpecified

boolean = true

عند التمكين، يجب عليك توفير امتداد الملف عند importing module في ملفات .mjs أو أي ملفات .js أخرى عندما يحتوي الملف الأصلي package.json على حقل "type" بقيمة "module"، وإلا فإن webpack سيفشل التجميع مع خطأ Module not found. وwebpack لن resolve الدلائل ذات أسماء الملفات المحددة في resolve.mainFiles، عليك تحديد اسم الملف بنفسك.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false, // disable the behaviour
        },
      },
    ],
  },
};

Rule.with

v5.92.0+

Condition يسمح لك بمطابقة الواردات بناءً على شروط محددة مقدمة مع الكلمة الأساسية with، مما يتيح تطبيق قواعد مختلفة بناءً على نوع المحتوى.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        // يتعامل مع الواردات بالشرط "مع { type: 'json' }"
        with: { type: "json" },
        loader: import.meta.resolve("./loader-assert.js"),
      },
    ],
  },
};

index.js

import one from "./pkg-1.json" with { type: "json" };

في هذا المثال، يتم استخدام Rule.with لتطبيق loader-assert.js على أي module مستورد بالشرط with { type: "json" }.

الحالة

الشروط يمكن أن تكون واحدة من هذه:

أ string: لمطابقة الإدخال يجب أن يبدأ بـ string المقدم. أي. مسار الدليل المطلق، أو المسار المطلق للملف.
أ RegExp: تم اختباره باستخدام الإدخال.
A function: يتم استدعاؤه مع الإدخال ويجب أن يُرجع قيمة صحيحة للمطابقة.
array من الشروط: يجب أن يتطابق شرط واحد على الأقل.
object: يجب أن تتطابق جميع الخصائص. كل خاصية لها سلوك محدد.

{ and: [Condition] }: يجب أن تتطابق جميع الشروط.

{ or: [Condition] }: يجب أن يتطابق أي شرط.

{ not: [Condition] }: يجب ألا تتطابق جميع الشروط.

مثال:

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [
          // سيتضمن أي مسارات تتعلق بالدليل الحالي تبدأ بـ `app/styles`
          // على سبيل المثال `app/styles.css`، `app/styles/styles.css`، `app/stylesheet.css`
          path.resolve(__dirname, "app/styles"),
          // أضف شرطة مائلة إضافية لتضمين محتوى الدليل `vendor/styles/` فقط
          path.join(__dirname, "vendor/styles/"),
        ],
      },
    ],
  },
};

UseEntry

object function(info)

object

يجب أن تحتوي على خاصية loader وهي string. تم حلها بالنسبة إلى التخصيص context مع خيارات الحل loader (resolveLoader).

يمكن أن تحتوي على خاصية options وهي string أو object. يتم تمرير هذه القيمة إلى loader، والتي يجب أن تفسرها على أنها خيارات loader.

من أجل التوافق، من الممكن أيضًا استخدام خاصية query، وهي اسم مستعار للخاصية options. استخدم الخاصية options بدلاً من ذلك.

لاحظ أن webpack يحتاج إلى إنشاء معرف module فريد من المصدر وجميع loaders بما في ذلك الخيارات. يحاول القيام بذلك باستخدام JSON.stringify من الخيارات object. يعد هذا أمرًا جيدًا في 99.9% من الحالات، ولكنه قد لا يكون فريدًا إذا قمت بتطبيق نفس loaders مع خيارات مختلفة على المورد وكانت الخيارات لها نفس القيم الموحدة.

وينكسر أيضًا إذا لم يكن من الممكن تقييد الخيارات object (أي دائرية JSON). ولهذا السبب يمكن أن يكون لديك خاصية ident في الخيارات object والتي يتم استخدامها كمعرف فريد.

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        loader: "css-loader",
        options: {
          modules: true,
        },
      },
    ],
  },
};

function(info)

يمكن أن يكون UseEntry أيضًا function الذي يستقبل الوسيطة object التي تصف module الجاري تحميلها، ويجب أن يُرجع غير function UseEntry object. يمكن استخدام هذا لتغيير خيارات loader على أساس module.

تحتوي المعلمة info object على الحقول التالية:

compiler: التيار webpack compiler (يمكن أن يكون غير محدد)
issuer: المسار إلى module الذي يقوم باستيراد module الجاري تحميله
realResource: يتم دائمًا تحميل المسار إلى module
resource: المسار إلى module الذي يتم تحميله، عادةً ما يساوي realResource إلا عندما تتم الكتابة فوق اسم المورد عبر !=! في الطلب string

webpack.config.js

export default {
  // ...
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: "asset",
        use: (info) => ({
          loader: "svgo-loader",
          options: {
            plugins: [
              {
                cleanupIDs: { prefix: basename(info.resource) },
              },
            ],
          },
        }),
      },
    ],
  },
};

Module السياقات

تصف هذه الخيارات الإعدادات الافتراضية للسياق الذي تم إنشاؤه عند مواجهة dependency ديناميكي.

مثال لديناميكية unknown dependency: require.

مثال لديناميكية expr dependency: require(expr).

مثال لديناميكية wrapped dependency: require('./templates/' + expr).

فيما يلي الخيارات المتاحة مع الإعدادات الافتراضية:

webpack.config.js

export default {
  // ...
  module: {
    exprContextCritical: true,
    exprContextRecursive: true,
    exprContextRegExp: false,
    exprContextRequest: ".",
    unknownContextCritical: true,
    unknownContextRecursive: true,
    unknownContextRegExp: false,
    unknownContextRequest: ".",
    wrappedContextCritical: false,
    wrappedContextRecursive: true,
    wrappedContextRegExp: /.*/,
    strictExportPresence: false,
  },
};

بعض حالات الاستخدام:

تحذير من الديناميكية dependencies: wrappedContextCritical: true.
يجب أن يتضمن require(expr) الدليل بأكمله: exprContextRegExp: /^\.\//
يجب ألا يتضمن require('./templates/' + expr) أدلة فرعية بشكل افتراضي: wrappedContextRecursive: false
strictExportPresence يجعل عمليات التصدير المفقودة خطأ بدلاً من التحذير
اضبط التعبير العادي الداخلي للديناميكية الجزئية dependencies : wrappedContextRegExp: /\\.\\*/

Edit this page·

« Previous

Output

Resolve

Module

module.defaultRules

module.generator

أسماء مستعارة متعددة عبر exportsConvention

module.parser

module.parser.css

module.parser.css.import

module.parser.css.url

module.parser.css.namedExports

module.parser.css.pure

module.parser.css.animation

module.parser.css.container

module.parser.css.customIdents

module.parser.css.dashedIdents

module.parser.css.function

module.parser.css.grid

module.parser.css.exportType

module.parser.javascript

module.parser.javascript.anonymousDefaultExportName

module.parser.javascript.commonjsMagicComments

module.parser.javascript.dynamicImportFetchPriority

module.parser.javascript.dynamicImportMode

module.parser.javascript.dynamicImportPrefetch

module.parser.javascript.dynamicImportPreload

module.parser.javascript.exportsPresence

module.parser.javascript.importExportsPresence

module.parser.javascript.importMeta

module.parser.javascript.importMetaContext

module.parser.javascript.overrideStrict

module.parser.javascript.reexportExportsPresence

module.parser.javascript.url

module.parser.javascript.parse

module.parser.json

module.parser.json.exportsDepth

module.parser.json.namedExports

module.parser.json.parse

module.noParse

module.unsafeCache

module.rules

القاعدة

شروط القاعدة

نتائج القاعدة

قواعد متداخلة

Rule.assert

Rule.compiler

Rule.enforce

Rule.exclude

Rule.include

Rule.issuer

Rule.issuerLayer

Rule.layer

Rule.extractSourceMap

Rule.loader

Rule.loaders

Rule.mimetype

Rule.oneOf

Rule.options / Rule.query

Rule.parser

Rule.parser.dataUrlCondition

Rule.generator

Rule.generator.dataUrl

Rule.generator.emit

Rule.generator.filename

Rule.generator.publicPath

Rule.generator.outputPath

Rule.resource

Rule.resourceQuery

Rule.parser.parse

Rule.rules

Rule.scheme

Rule.sideEffects

Rule.test

Rule.type

المغلق/تلقائي

Rule.use

Rule.resolve

resolve.fullySpecified

Rule.with

الحالة

UseEntry

أسماء مستعارة متعددة عبر `exportsConvention`