Resolve

تغير هذه الخيارات كيفية حل modules. يوفر webpack إعدادات افتراضية معقولة، ولكن من الممكن تغيير الحل بالتفصيل. قم بإلقاء نظرة على Module القرار لمزيد من التوضيح حول كيفية عمل resolver.

resolve

object

قم بتخصيص كيفية حل modules. على سبيل المثال، عند الاتصال بـ import 'lodash' في ES2015، يمكن أن تتغير خيارات resolve حيث يذهب webpack للبحث عن 'lodash' (راجع modules).

webpack.config.js

export default {
  // ...
  resolve: {
    // خيارات التخصيص
  },
};

resolve.alias

object

قم بإنشاء أسماء مستعارة لـ import أو require معينة modules بسهولة أكبر. على سبيل المثال، لإنشاء اسم مستعار لمجموعة من المجلدات src/ شائعة الاستخدام:

webpack.config.js

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

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

export default {
  // ...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, "src/utilities/"),
      Templates: path.resolve(__dirname, "src/templates/"),
    },
  },
};

الآن، بدلاً من استخدام المسارات النسبية عند الاستيراد بهذه الطريقة:

import Utility from "../../utilities/utility";

يمكنك استخدام الاسم المستعار:

import Utility from "Utilities/utility";

يمكن أيضًا إضافة `يمكن أيضًا إضافة زائدة إلى مفاتيح object المحددة للدلالة على التطابق التام:

webpack.config.js

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

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

export default {
  // ...
  resolve: {
    alias: {
      xyz$: path.resolve(__dirname, "path/to/file.js"),
    },
  },
};

والتي من شأنها أن تسفر عن هذه النتائج:

import Test1 from "xyz"; // Exact match, so path/to/file.js is resolved and imported
import Test2 from "xyz/file.js"; // Not an exact match, normal resolution takes place

يمكنك أيضًا استخدام أحرف البدل (*) في تخصيص الاسم المستعار الخاص بك لإنشاء تعيينات أكثر مرونة:

webpack.config.js

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

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

export default {
  // ...
  resolve: {
    alias: {
      "@*": path.resolve(__dirname, "src/*"), // maps @something to path/to/something
    },
  },
};

يتيح لك هذا استخدام الواردات مثل:

import Component from "@components/Button";
import utils from "@utils/helpers";

ويوضح الجدول التالي الحالات الأخرى:

index.js يجوز resolve إلى ملف آخر إذا تم تعريفه في package.json.

/abc/node_modules قد resolve في /node_modules أيضًا.

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

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

export default {
  // ...
  resolve: {
    alias: {
      _: [
        path.resolve(__dirname, "src/utilities/"),
        path.resolve(__dirname, "src/templates/"),
      ],
    },
  },
};

سيؤدي ضبط resolve.alias على false إلى مطالبة webpack بتجاهل module.

export default {
  // ...
  resolve: {
    alias: {
      "ignored-module": false,
      "./ignored-module": false,
    },
  },
};

resolve.aliasFields

[string]: ['browser']

حدد حقلاً، مثل browser، ليتم تحليله وفقًا لـ هذه المواصفات.

webpack.config.js

export default {
  // ...
  resolve: {
    aliasFields: ["browser"],
  },
};

resolve.byDependency

قم بتخصيص خيارات resolve حسب نوع الطلب module.

• النوع: [type: string]: ResolveOptions

• مثال:

  Copy

  export default {
    // ...
    resolve: {
      byDependency: {
        // ...
        esm: {
          mainFields: ["browser", "module"],
        },
        commonjs: {
          aliasFields: ["browser"],
        },
        url: {
          preferRelative: true,
        },
      },
    },
  };

resolve.cache

boolean

لتمكين caching من الطلبات التي تم حلها بنجاح، مما يسمح بإعادة التحقق من صحة إدخالات cache.

webpack.config.js

export default {
  // ...
  resolve: {
    cache: true,
  },
};

resolve.cachePredicate

function(module) => boolean

function الذي يقرر ما إذا كان يجب تخزين الطلب مؤقتًا أم لا. يتم تمرير object إلى function باستخدام الخاصيتين path وrequest. يجب أن يُرجع boolean.

webpack.config.js

export default {
  // ...
  resolve: {
    cachePredicate: (module) =>
      // منطق إضافي
      true,
  },
};

resolve.cacheWithContext

boolean

إذا تم تمكين cache غير الآمن، فسيتم تضمين request.context في المفتاح cache. يتم أخذ هذا الخيار في الاعتبار بواسطة enhanced-resolve module. يتم تجاهل context في resolve caching عند توفير resolve أو ResolveLoader plugins. يعالج هذا انحدار performance.

resolve.conditionNames

string[]

أسماء الشروط لـ exports الحقل التي تحدد entry points لـ package.

webpack.config.js

export default {
  // ...
  resolve: {
    conditionNames: ["require", "node"],
  },
};

سوف يتطابق webpack مع شروط التصدير المدرجة ضمن resolve.conditionNames array.

القيم الافتراضية

يتم تخصيص conditionNames الافتراضي ديناميكيًا استنادًا إلى تخصيصات mode وtarget:

تتضمن الشروط الأساسية دائمًا ما يلي:

• "webpack" — حاضر دائمًا.
• "production" أو "development" — بناءً على التيار mode (يتم استخدام "production" عندما يكون الوضع "none" أو "production").

يتم إلحاق شروط إضافية بناءً على target:

على سبيل المثال، مع target: "web" (الافتراضي) وmode: "production"، يكون الإعداد الافتراضي conditionNames هو ["webpack", "production", "browser"].

شروط النوع لكل dependency

يقوم webpack بضبط conditionNames حتى resolve.byDependency اعتمادًا على كيفية استيراد module. يرث الرمز المميز "..." من الشروط الأساسية المذكورة أعلاه.

يتم تضمين 5.107.0+ "module-sync" في الشروط الافتراضية للتوافق مع Node.js، مما يعرض حالة مجتمع module-sync لـ قابل للتحميل بشكل متزامن ESM. Packages التي تنشر تصدير module-sync في يتم التقاط package.json الخاصة بهم تلقائيًا دون أي إضافة التخصيص.

على سبيل المثال، عندما يستخدم ملف import في مشروع يحتوي على target: "web" وmode: "production"، فإن الشروط النهائية التي تم حلها هي ["import", "module-sync", "module", "webpack", "production", "browser"].

مطابقة الحالة

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

على سبيل المثال،

package.json

{
  "name": "foo",
  "exports": {
    ".": {
      "import": "./index-import.js",
      "require": "./index-require.js",
      "node": "./index-node.js"
    },
    "./bar": {
      "node": "./bar-node.js",
      "require": "./bar-require.js"
    },
    "./baz": {
      "import": "./baz-import.js",
      "node": "./baz-node.js"
    }
  }
}

webpack.config.js

export default {
  // ...
  resolve: {
    conditionNames: ["require", "node"],
  },
};

import

• 'foo' سوف resolve إلى 'foo/index-require.js'
• 'foo/bar' سوف resolve إلى 'foo/bar-node.js' حيث أن المفتاح "node" يأتي قبل مفتاح "require" في عمليات التصدير الشرطية object.
• 'foo/baz' سوف resolve إلى 'foo/baz-node.js'

شروط مخصصة

إذا كنت تريد إضافة أسماء الحقول المخصصة الخاصة بك مع الاحتفاظ بالقيم الافتراضية webpack، فيمكنك استخدام "...":

webpack.config.js

export default {
  // ...
  resolve: {
    conditionNames: ["my-custom-condition", "..."],
  },
};

وبدلاً من ذلك، لتحديد أولوية الشروط الافتراضية أولاً، ثم قم بإضافة شروطك المخصصة:

webpack.config.js

export default {
  // ...
  resolve: {
    conditionNames: ["...", "my-custom-condition"],
  },
};

resolve.descriptionFiles

[string] = ['package.json']

ملفات JSON المستخدمة للأوصاف.

webpack.config.js

export default {
  // ...
  resolve: {
    descriptionFiles: ["package.json"],
  },
};

resolve.enforceExtension

boolean = false

إذا كان true، فلن يسمح بالملفات ذات الامتدادات الأقل. لذلك يعمل import foo from "./foo";/require('./foo') بشكل افتراضي إذا كان ./foo له امتداد .js، ولكن مع تمكين هذا فقط import foo from "./foo.js"/require('./foo.js') سيعمل.

webpack.config.js

export default {
  // ...
  resolve: {
    enforceExtension: false,
  },
};

resolve.exportsFields

[string] = ['exports']

الحقول الموجودة في package.json المستخدمة لحل طلبات module. راجع package-إرشادات التصدير لمزيد من المعلومات.

webpack.config.js

export default {
  // ...
  resolve: {
    exportsFields: ["exports", "myCompanyExports"],
  },
};

resolve.extensionAlias

object

object الذي يعيّن الامتداد للأسماء المستعارة للامتداد.

webpack.config.js

export default {
  // ...
  resolve: {
    extensionAlias: {
      ".js": [".ts", ".js"],
      ".mjs": [".mts", ".mjs"],
    },
  },
};

resolve.extensions

[string] = ['.js', '.json', '.wasm']

حاول resolve هذه الامتدادات بالترتيب. إذا كانت هناك ملفات متعددة تشترك في نفس الاسم ولكن لها امتدادات مختلفة، فإن webpack سوف resolve الملف ذو الامتداد المدرج أولاً في array ويتخطى الباقي.

webpack.config.js

export default {
  // ...
  resolve: {
    extensions: [".js", ".json", ".wasm"],
  },
};

وهو ما يمكّن المستخدمين من ترك الامتداد عند الاستيراد:

import File from "../path/to/file";

لاحظ أن استخدام resolve.extensions كما هو مذكور أعلاه سوف يلغي الافتراضي array، مما يعني أن webpack لن يحاول بعد الآن resolve modules باستخدام الامتدادات الافتراضية. ومع ذلك، يمكنك استخدام '...' للوصول إلى الامتدادات الافتراضية:

export default {
  // ...
  resolve: {
    extensions: [".ts", "..."],
  },
};

resolve.fallback

object

إعادة توجيه طلبات module عند فشل الحل العادي.

webpack.config.js

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

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

export default {
  // ...
  resolve: {
    fallback: {
      abc: false, // do not include a polyfill for abc
      xyz: path.resolve(__dirname, "path/to/file.js"), // include a polyfill for xyz
    },
  },
};

webpack 5 لم تعد تملأ Node.js الأساسية modules تلقائيًا مما يعني أنه إذا كنت تستخدمها في التعليمات البرمجية الخاصة بك التي تعمل في browsers أو ما شابه ذلك، فسيتعين عليك تثبيت modules المتوافق من npm وتضمينها بنفسك. فيما يلي قائمة بالحشوات المتعددة التي استخدمها webpack قبل webpack 5:

import { createRequire } from "node:module";

const require = createRequire(import.meta.url);

export default {
  // ...
  resolve: {
    fallback: {
      assert: require.resolve("assert"),
      buffer: require.resolve("buffer"),
      console: require.resolve("console-browserify"),
      constants: require.resolve("constants-browserify"),
      crypto: require.resolve("crypto-browserify"),
      domain: require.resolve("domain-browser"),
      events: require.resolve("events"),
      http: require.resolve("stream-http"),
      https: require.resolve("https-browserify"),
      os: require.resolve("os-browserify/browser"),
      path: require.resolve("path-browserify"),
      punycode: require.resolve("punycode"),
      process: require.resolve("process/browser"),
      querystring: require.resolve("querystring-es3"),
      stream: require.resolve("stream-browserify"),
      string_decoder: require.resolve("string_decoder"),
      sys: require.resolve("util"),
      timers: require.resolve("timers-browserify"),
      tty: require.resolve("tty-browserify"),
      url: require.resolve("url"),
      util: require.resolve("util"),
      vm: require.resolve("vm-browserify"),
      zlib: require.resolve("browserify-zlib"),
    },
  },
};

resolve.fullySpecified

boolean

عند التعيين على "صحيح"، يتعامل هذا الخيار مع الطلبات المحددة من قبل المستخدم على أنها محددة بالكامل. وهذا يعني أنه لا تتم إضافة أي ملحقات تلقائيًا، ولا يتم حل الملفات الرئيسية داخل الدلائل. من المهم ملاحظة أن هذا السلوك لا يؤثر على الطلبات المقدمة من خلال mainFields، أو aliasFields، أو aliases.

webpack.config.js

export default {
  // ...
  resolve: {
    fullySpecified: true,
  },
};

resolve.importsFields

[string]

الحقول من package.json والتي يتم استخدامها لتوفير الطلبات الداخلية لـ package (الطلبات التي تبدأ بـ # تعتبر داخلية).

webpack.config.js

export default {
  // ...
  resolve: {
    importsFields: ["browser", "module", "main"],
  },
};

resolve.mainFields

[string]

عند الاستيراد من npm package، على سبيل المثال، import * as D3 from 'd3'، سيحدد هذا الخيار الحقول الموجودة في package.json التي تم تحديدها. ستختلف القيم الافتراضية بناءً على target المحدد في تخصيص webpack الخاص بك.

عند ضبط الخاصية target على webworker أو web أو تركها غير محددة:

webpack.config.js

export default {
  // ...
  resolve: {
    mainFields: ["browser", "module", "main"],
  },
};

لأي target أخرى (بما في ذلك node):

webpack.config.js

export default {
  // ...
  resolve: {
    mainFields: ["module", "main"],
  },
};

على سبيل المثال، ضع في الاعتبار library عشوائيًا يسمى upstream مع package.json الذي يحتوي على الحقول التالية:

{
  "browser": "build/upstream.js",
  "module": "index"
}

عندما نقوم import * as Upstream from 'upstream' سيؤدي هذا في الواقع إلى resolve للملف الموجود في الخاصية browser. الخاصية browser لها الأولوية لأنها العنصر الأول في mainFields. وفي الوقت نفسه، سيحاول تطبيق Node.js المجمع بواسطة webpack أولاً resolve باستخدام الملف الموجود في الحقل module.

resolve.mainFiles

[string] = ['index']

اسم الملف الذي سيتم استخدامه أثناء حل الدلائل.

webpack.config.js

export default {
  // ...
  resolve: {
    mainFiles: ["index"],
  },
};

resolve.modules

[string] = ['node_modules']

أخبر webpack ما هي الأدلة التي يجب البحث فيها عند حل modules.

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

سيتم فحص المسار النسبي بشكل مشابه لكيفية فحص Node بحثًا عن node_modules، من خلال البحث في الدليل الحالي بالإضافة إلى أسلافه (أي ./node_modules، ../node_modules، وما إلى ذلك).

مع المسار المطلق، سيتم البحث فقط في الدليل المحدد.

webpack.config.js

export default {
  // ...
  resolve: {
    modules: ["node_modules"],
  },
};

إذا كنت تريد إضافة دليل للبحث فيه فله الأولوية على node_modules/:

webpack.config.js

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

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

export default {
  // ...
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"],
  },
};

resolve.plugins

[Plugin | Function]

قائمة resolve plugins الإضافية التي يجب تطبيقها.

يمكن أن يكون كل entry إما:

• plugin object بطريقة apply(resolver)
• أو function plugin، والذي سيتم استدعاؤه باستخدام resolver باعتباره this والوسيطة الأولى

يسمح بـ plugins مثل DirectoryNamedWebpackPlugin.

webpack.config.js

export default {
  // ...
  resolve: {
    plugins: [
      // Object-نمط plugin
      {
        apply(resolver) {
          // منطق مخصص
        },
      },

      // Function-نمط plugin
      function (resolver) {
        // `this` is also the resolver
      },
    ],
  },
};

resolve.preferAbsolute

boolean

تفضل المسارات المطلقة إلى resolve.roots عند الحل.

webpack.config.js

export default {
  // ...
  resolve: {
    preferAbsolute: true,
  },
};

resolve.preferRelative

boolean

عند التمكين، يفضل webpack طلبات resolve module كطلبات نسبية بدلاً من استخدام modules من أدلة node_modules.

webpack.config.js

export default {
  // ...
  resolve: {
    preferRelative: true,
  },
};

src/index.js

// لنفترض أن `src/logo.svg` موجود
import logo1 from "logo.svg"; // this is viable when `preferRelative` enabled
import logo2 from "./logo.svg"; // otherwise you can only use relative path to resolve logo.svg

// `preferRelative` is enabled by default for `new URL()` case
const b = new URL("module/path", import.meta.url);
const a = new URL("./module/path", import.meta.url);

resolve.restrictions

[string, RegExp]

قائمة بقيود resolve لتقييد المسارات التي يمكن حل الطلب عليها.

webpack.config.js

export default {
  // ...
  resolve: {
    restrictions: [/\.(sass|scss|css)$/],
  },
};

resolve.roots

[string]

قائمة بالأدلة التي يتم فيها حل طلبات عناوين URL ذات الصلة بـ server (التي تبدأ بـ '/')، والإعدادات الافتراضية هي context خيار التخصيص. في الأنظمة التي لا تعمل بنظام Windows، يتم حل هذه الطلبات كمسار مطلق أولاً.

webpack.config.js

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

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const fixtures = path.resolve(__dirname, "fixtures");

export default {
  // ...
  resolve: {
    roots: [__dirname, fixtures],
  },
};

resolve.symlinks

boolean = true

ما إذا كان سيتم ربط resolve بالارتباطات الرمزية إلى موقع الارتباط الرمزي الخاص بها.

عند التمكين، يتم تحويل الموارد المرتبطة بالرمز إلى مسارها _الحقيقي، وليس إلى موقع الارتباط الرمزي الخاص بها. لاحظ أن هذا قد يتسبب في فشل دقة module عند استخدام الأدوات التي تربط packages (مثل npm link).

webpack.config.js

export default {
  // ...
  resolve: {
    symlinks: true,
  },
};

resolve.unsafeCache

object boolean = true

تمكين العدوانية، ولكن غير الآمنة، caching من modules. تمرير true سوف cache كل شيء.

webpack.config.js

export default {
  // ...
  resolve: {
    unsafeCache: true,
  },
};

عند توفير object، سيستخدمه webpack كـ cache.

على سبيل المثال، يمكنك توفير Proxy object بدلاً من الوكيل العادي:

webpack.config.js

// منقول من المناقشة هنا https://github.com/webpack/webpack/discussions/18089
const realUnsafeCache = {};
const unsafeCacheHandler = {
  get(cache, key) {
    const cachedValue = cache[key];

    // تأكد من وجود الملف على القرص
    if (cachedValue && !fs.existsSync(cachedValue.path)) {
      // وإذا لم يحدث ذلك، قم بطرد cache entry.
      delete cache[key];
      return undefined;
    }

    return cachedValue;
  },
};
const theProxiedCache = new Proxy(realUnsafeCache, unsafeCacheHandler);

export default {
  // ...
  resolve: {
    unsafeCache: theProxiedCache,
  },
};

resolve.useSyncFileSystemCalls

boolean

استخدم استدعاءات نظام الملفات المتزامنة لـ resolver.

webpack.config.js

export default {
  // ...
  resolve: {
    useSyncFileSystemCalls: true,
  },
};

resolve.tsconfig

boolean string object

TypeScript التخصيص لتعيين المسارات. يحل هذا الخيار محل الحاجة إلى tsconfig-paths-webpack-plugin. يقرأ compilerOptions.baseUrl وcompilerOptions.paths من tsconfig.json ويطبق تلك الأسماء المستعارة عند حل عمليات الاستيراد.

webpack.config.js

export default {
  // ...
  resolve: {
    tsconfig: true, // Use default tsconfig.json
  },
};

الخيارات:

• false - تعطيل تعيين المسار TypeScript
• true - استخدم الملف tsconfig.json الافتراضي (يبحث عنه تلقائيًا)
• string - المسار إلى ملف tsconfig.json (نسبي أو مطلق)

webpack.config.js

export default {
  // ...
  resolve: {
    tsconfig: "./tsconfig.app.json", // Custom path
  },
};

• object - Object مع خيارات configFile وreferences

webpack.config.js

export default {
  // ...
  resolve: {
    tsconfig: {
      configFile: "./tsconfig.json",
      references: "auto", // or array of paths
    },
  },
};

Object الخيارات:

• configFile (string): مسار إلى ملف tsconfig (نسبي أو مطلق)
• references ("auto" | string[]): مراجع لملفات tsconfig الأخرى. "auto" يرث من تخصيص TypeScript، أو array من المسارات النسبية/المطلقة

مثال tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"]
    }
  }
}

ثم في الكود الخاص بك:

import Button from "@/components/Button";
import Header from "components/Header";

ResolveLoader

object { modules [string] = ['node_modules'], extensions [string] = ['.js', '.json'], mainFields [string] = ['loader', 'main']}

مجموعة الخيارات هذه مطابقة للخاصية resolve المذكورة أعلاه، ولكنها تستخدم فقط لـ resolve webpack's loader packages.

webpack.config.js

export default {
  // ...
  resolveLoader: {
    modules: ["node_modules"],
    extensions: [".js", ".json"],
    mainFields: ["loader", "main"],
  },
};