Разрешение

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

resolve

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

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

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/index.js	/abc/node_modules/xyz/file.js
{ xyz: '/abs/path/to/file.js' } /abs/path/to/file.js	/abs/path/to/file.js	ошибка
{ xyz$: '/abs/path/to/file.js' } /abs/path/to/file.js	/abs/path/to/file.js	/abc/node_modules/xyz/file.js
{ xyz: './dir/file.js' } /abc/dir/file.js	/abc/dir/file.js	ошибка
{ xyz$: './dir/file.js' } /abc/dir/file.js	/abc/dir/file.js	/abc/node_modules/xyz/file.js
{ xyz: '/some/dir' } /some/dir/index.js	/some/dir/index.js	/some/dir/file.js
{ xyz$: '/some/dir' } /some/dir/index.js	/some/dir/index.js	/abc/node_modules/xyz/file.js
{ xyz: './dir' } /abc/dir/index.js	/abc/dir/index.js	/abc/dir/file.js
{ xyz: 'modu' } /abc/node_modules/modu/index.js	/abc/node_modules/modu/index.js	/abc/node_modules/modu/file.js
{ xyz$: 'modu' } /abc/node_modules/modu/index.js	/abc/node_modules/modu/index.js	/abc/node_modules/xyz/file.js
{ xyz: 'modu/some/file.js' } /abc/node_modules/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/index.js	/abc/node_modules/dir/file.js
{ xyz: 'xyz/dir' } /abc/node_modules/xyz/dir/index.js	/abc/node_modules/xyz/dir/index.js	/abc/node_modules/xyz/dir/file.js
{ xyz$: 'xyz/dir' } /abc/node_modules/xyz/dir/index.js	/abc/node_modules/xyz/dir/index.js	/abc/node_modules/xyz/file.js

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

/abc/node_modules также может разрешиться в /node_modules.

resolve.alias имеет приоритет над другими разрешениями модулей.

resolve.aliasFields

[string]: ['browser']

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

webpack.config.js

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

resolve.cacheWithContext

boolean (с webpack 3.1.0)

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

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.enforceModuleExtension

boolean = false

Удалено в webpack 5

Указывает webpack, требуется ли использовать расширение для модулей (например, для загрузчиков).

webpack.config.js

module.exports = {
  //...
  resolve: {
    enforceModuleExtension: false
  }
};

resolve.extensions

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

Попытка разрешения этих расширений в порядке следования.

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

webpack.config.js

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

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

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

Использование этого параметра заменит массив по умолчанию, что означает, что webpack больше не будет пытаться разрешить модули с использованием расширений по умолчанию.

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

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

resolve.unsafeCache

RegExp [RegExp] boolean: true

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

webpack.config.js

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

Можно использовать регулярное выражение или массив регулярных выражений для проверки путей файлов и кэширования только определённых модулей. Например, чтобы кэшировать только утилиты:

webpack.config.js

module.exports = {
  //...
  resolve: {
    unsafeCache: /src\/utilities/
  }
};

Изменения в кэшированных путях могут привести к сбоям в редких случаях.

resolve.plugins

[Plugin]

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

webpack.config.js

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

resolve.symlinks

boolean = true

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

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

webpack.config.js

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

resolve.cachePredicate

function(module) => boolean

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

webpack.config.js

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

resolveLoader

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

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

webpack.config.js

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

Обратите внимание, что вы можете использовать здесь псевдонимы и другие функции, знакомые по resolve. Например { txt: 'raw-loader' } заменит txt!templates/demo.txt на raw-loader.

resolveLoader.moduleExtensions

[string]

Удалено в webpack 5

Расширения/суффиксы, используемые при разрешении загрузчиков. С версии два мы настоятельно рекомендуем использовать полное имя, например example-loader, по возможности для большей ясности. Однако, если вы действительно хотите исключить -loader часть, т.е. использовать только example, вы можете использовать эту опцию:

webpack.config.js

module.exports = {
  //...
  resolveLoader: {
    moduleExtensions: ['-loader']
  }
};