Разрешение

Эти параметры изменяют способ разрешения модулей. Webpack предоставляет разумные значения по умолчанию, но можно изменить разрешение более подробно. Подробнее о работе разрешителя см. в разрешении модулей.

разрешение

object

Настройка способа разрешения модулей. Например, при вызове import 'lodash' в ES2015 параметры resolve могут изменить место, где webpack ищет 'lodash' (см. modules).

webpack.config.js

module.exports = {
  //...
  resolve: {
    // configuration options
  },
};

resolve.alias

object

Создайте псевдонимы для import или require определенных модулей для более лёгкого доступа. Например, для создания псевдонимов для нескольких часто используемых папок src/.

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/'),
    },
  },
};

Теперь вместо использования относительных путей при импорте, например:

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

можно использовать псевдоним:

import Utility from 'Utilities/utility';

В дополнение, к ключам в данном объекте можно добавить суффикс $ для указания точного соответствия:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  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

Следующая таблица объясняет другие случаи:

`alias:`	`import 'xyz'`	`import 'xyz/file.js'`
`{}`	`/abc/node_modules/xyz/index.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: '/abc/path/to/file.js' }`	`/abc/path/to/file.js`	ошибка
`{ xyz$: '/abc/path/to/file.js' }`	`/abc/path/to/file.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: './dir/file.js' }`	`/abc/dir/file.js`	ошибка
`{ xyz$: './dir/file.js' }`	`/abc/dir/file.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: '/some/dir' }`	`/some/dir/index.js`	`/some/dir/file.js`
`{ xyz$: '/some/dir' }`	`/some/dir/index.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: './dir' }`	`/abc/dir/index.js`	`/abc/dir/file.js`
`{ xyz: 'modu' }`	`/abc/node_modules/modu/index.js`	`/abc/node_modules/modu/file.js`
`{ xyz$: 'modu' }`	`/abc/node_modules/modu/index.js`	`/abc/node_modules/xyz/file.js`
`{ xyz: 'modu/some/file.js' }`	`/abc/node_modules/modu/some/file.js`	ошибка
`{ xyz: 'modu/dir' }`	`/abc/node_modules/modu/dir/index.js`	`/abc/node_modules/modu/dir/file.js`
`{ xyz$: 'modu/dir' }`	`/abc/node_modules/modu/dir/index.js`	`/abc/node_modules/xyz/file.js`

index.js может быть перенаправлено на другой файл, если определено в package.json.

/abc/node_modules может быть перенаправлено также в /node_modules.

module.exports = {
  //...
  resolve: {
    alias: {
      _: [
        path.resolve(__dirname, 'src/utilities/'),
        path.resolve(__dirname, 'src/templates/'),
      ],
    },
  },
};

Установка resolve.alias в false сообщит webpack о пропуске модуля.

module.exports = {
  //...
  resolve: {
    alias: {
      'ignored-module': false,
      './ignored-module': false,
    },
  },
};

resolve.aliasFields

[string]: ['browser']

Укажите поле, такое как browser, для обработки в соответствии со этим спецификацией.

webpack.config.js

module.exports = {
  //...
  resolve: {
    aliasFields: ['browser'],
  },
};

resolve.byDependency

Настройте параметры resolve в зависимости от типа запроса модуля.

Тип: [type: string]: ResolveOptions

Пример:

module.exports = {
  // ...
  resolve: {
    byDependency: {
      // ...
      esm: {
        mainFields: ['browser', 'module'],
      },
      commonjs: {
        aliasFields: ['browser'],
      },
      url: {
        preferRelative: true,
      },
    },
  },
};

resolve.cache

boolean

Включает кэширование успешно разрешенных запросов, позволяя повторно проверять записи в кэше.

webpack.config.js

module.exports = {
  //...
  resolve: {
    cache: true,
  },
};

resolve.cachePredicate

function(module) => boolean

Функция, определяющая, должен ли запрос быть помещён в кэш. В функцию передаётся объект с свойствами path и request. Функция должна возвращать булево значение.

webpack.config.js

module.exports = {
  //...
  resolve: {
    cachePredicate: (module) => {
      // additional logic
      return true;
    },
  },
};

resolve.cacheWithContext

boolean

Если включен небезопасный кэш, в ключ кэша включается request.context. Этот параметр учитывается модулем enhanced-resolve. context в кэшировании resolve игнорируется, когда предоставлены плагины resolve или resolveLoader. Это решает проблему снижения производительности.

resolve.conditionNames

string[]

Имена условий для exports поля, которое определяет точки входа пакета.

webpack.config.js

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

Webpack будет сопоставлять условия экспорта, перечисленные в массиве resolve.conditionNames.

Порядок ключей в поле 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

module.exports = {
  //...
  resolve: {
    conditionNames: ['require', 'node'],
  },
};

импорт

'foo' будет разрешен в 'foo/index-require.js'
'foo/bar' будет разрешен в 'foo/bar-node.js' так как ключ "node" предшествует ключу "require" в объекте условных экспортов.
'foo/baz' будет разрешен в 'foo/baz-node.js'

resolve.descriptionFiles

[string] = ['package.json']

JSON-файлы, используемые для описаний.

webpack.config.js

module.exports = {
  //...
  resolve: {
    descriptionFiles: ['package.json'],
  },
};

resolve.enforceExtension

boolean = false

Если true, то файлы без расширений разрешены не будут. По умолчанию require('./foo') работает, если у ./foo есть расширение .js, но с включённой опцией только require('./foo.js') будут работать.

webpack.config.js

module.exports = {
  //...
  resolve: {
    enforceExtension: false,
  },
};

resolve.exportsFields

[string] = ['exports']

Поля в package.json, используемые для разрешения запросов модулей. Подробнее см. руководство по пакетным экспортам.

webpack.config.js

module.exports = {
  //...
  resolve: {
    exportsFields: ['exports', 'myCompanyExports'],
  },
};

resolve.extensionAlias

object

Объект, сопоставляющий расширения псевдонимам расширений.

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensionAlias: {
      '.js': ['.ts', '.js'],
      '.mjs': ['.mts', '.mjs'],
    },
  },
};

resolve.extensions

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

Попытка разрешить эти расширения в указанном порядке. Если несколько файлов имеют одинаковое имя, но разные расширения, webpack разрешит тот, у которого расширение указано первым в массиве, и пропустит остальные.

webpack.config.js

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm'],
  },
};

что позволяет пользователям опускать расширение при импорте:

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

Обратите внимание, что использование resolve.extensions как указано выше, заменит массив по умолчанию, что означает, что webpack больше не будет пытаться разрешать модули с использованием расширений по умолчанию. Тем не менее, вы можете использовать '...' для доступа к расширениям по умолчанию:

module.exports = {
  //...
  resolve: {
    extensions: ['.ts', '...'],
  },
};

resolve.fallback

object

Перенаправление запросов модулей при неудачном обычном разрешении.

webpack.config.js

module.exports = {
  //...
  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, что означает, что если вы используете их в своём коде для работы в браузерах или подобных средах, вам нужно установить совместимые модули из npm и включить их самостоятельно. Вот список подключаемых модулей, которые webpack использовал до webpack 5:

module.exports = {
  //...
  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

При установке в true этот параметр рассматривает запросы, указанные пользователем, как полностью указанные. Это означает, что автоматически не добавляются расширения, и файлы main внутри каталогов не разрешаются. Важно отметить, что это поведение не влияет на запросы, сделанные через mainFields, aliasFields, или aliases.

webpack.config.js

module.exports = {
  //...
  resolve: {
    fullySpecified: true,
  },
};

resolve.importsFields

[string]

Поля из package.json, используемые для предоставления внутренних запросов пакета (запросы, начинающиеся с #, считаются внутренними).

webpack.config.js

module.exports = {
  //...
  resolve: {
    importsFields: ['browser', 'module', 'main'],
  },
};

resolve.mainFields

[string]

При импорте из пакета npm, например, import * as D3 from 'd3', этот параметр определит, какие поля в его package.json будут проверены. Значения по умолчанию будут варьироваться в зависимости от target, указанного в вашей конфигурации webpack.

Когда свойство target установлено в webworker, web, или не указано:

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main'],
  },
};

Для любых других целей (включая node):

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFields: ['module', 'main'],
  },
};

Например, рассмотрим произвольную библиотеку под названием upstream с файлом package.json, содержащим следующие поля:

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

При import * as Upstream from 'upstream', это фактически разрешит файл в свойстве browser. Свойство browser имеет приоритет, так как оно является первым элементом в mainFields. В то же время приложение Node.js, собранное с помощью webpack, сначала попытается разрешить файл в поле module.

resolve.mainFiles

[string] = ['index']

Имя файла, используемого при разрешении каталогов.

webpack.config.js

module.exports = {
  //...
  resolve: {
    mainFiles: ['index'],
  },
};

resolve.modules

[string] = ['node_modules']

Укажите webpack, какие каталоги следует искать при разрешении модулей.

Можно использовать как абсолютные, так и относительные пути, но учтите, что они будут вести себя немного по-разному.

Относительный путь будет сканироваться аналогично тому, как Node сканирует node_modules, просматривая текущий каталог, а также его предков (т. е. ./node_modules, ../node_modules, и так далее).

С абсолютным путем поиск будет производиться только в указанном каталоге.

webpack.config.js

module.exports = {
  //...
  resolve: {
    modules: ['node_modules'],
  },
};

Если вы хотите добавить каталог для поиска, который имеет приоритет перед node_modules/:

webpack.config.js

const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

resolve.plugins

[Plugin]

Список дополнительных плагинов разрешения, которые должны применяться. Это позволяет использовать плагины, такие как DirectoryNamedWebpackPlugin.

webpack.config.js

module.exports = {
  //...
  resolve: {
    plugins: [new DirectoryNamedWebpackPlugin()],
  },
};

resolve.preferAbsolute

boolean

5.13.0+

Указывать абсолютные пути для resolve.roots при разрешении.

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferAbsolute: true,
  },
};

resolve.preferRelative

boolean

При включенном значении webpack будет отдавать предпочтение разрешению запросов модулей как относительных запросов вместо использования модулей из node_modules каталогов.

webpack.config.js

module.exports = {
  //...
  resolve: {
    preferRelative: true,
  },
};

src/index.js

// let's say `src/logo.svg` exists
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]

Список ограничений разрешения для ограничения путей, на которых запрос может быть разрешен.

webpack.config.js

module.exports = {
  //...
  resolve: {
    restrictions: [/\.(sass|scss|css)$/],
  },
};

resolve.roots

[string]

Список каталогов, где разрешаются запросы серверных относительных URL-адресов (начинающихся с '/'), по умолчанию установлен в context параметре конфигурации. В системах, отличных от Windows, эти запросы сначала разрешаются как абсолютный путь.

webpack.config.js

const fixtures = path.resolve(__dirname, 'fixtures');
module.exports = {
  //...
  resolve: {
    roots: [__dirname, fixtures],
  },
};

resolve.symlinks

boolean = true

Разрешать ли символические ссылки до их местоположения в символической ссылке.

При включении символические ссылки разрешаются до их реального пути, а не до их местоположения в символической ссылке. Обратите внимание, что это может привести к сбою разрешения модулей при использовании инструментов, которые устанавливают символические ссылки для пакетов (например, npm link).

webpack.config.js

module.exports = {
  //...
  resolve: {
    symlinks: true,
  },
};

resolve.unsafeCache

object boolean = true

Включить агрессивное, но небезопасное кеширование модулей. Передача true будет кешировать всё.

webpack.config.js

module.exports = {
  //...
  resolve: {
    unsafeCache: true,
  },
};

При указании объекта webpack будет использовать его как кеш.

Например, вы можете указать объект Proxy вместо обычного:

webpack.config.js

// copied from discussion here https://github.com/webpack/webpack/discussions/18089
const realUnsafeCache = {};
const unsafeCacheHandler = {
  get(cache, key) {
    const cachedValue = cache[key];

    // make sure the file exists on disk
    if (cachedValue && !fs.existsSync(cachedValue.path)) {
      // and if it doesn't, evict that cache entry.
      delete cache[key];
      return undefined;
    }

    return cachedValue;
  },
};
const theProxiedCache = new Proxy(realUnsafeCache, unsafeCacheHandler);
module.exports = {
  //...
  resolve: {
    unsafeCache: theProxiedCache,
  },
};

resolve.useSyncFileSystemCalls

boolean

Использовать синхронные вызовы файловой системы для разрешителя.

webpack.config.js

module.exports = {
  //...
  resolve: {
    useSyncFileSystemCalls: true,
  },
};

resolveLoader

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

Этот набор опций идентичен свойству resolve выше, но используется только для разрешения пакетов загрузчиков webpack.

webpack.config.js

module.exports = {
  //...
  resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main'],
  },
};

© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/configuration/resolve