Resolve | webpack

These options change how modules are resolved. Webpack provides reasonable defaults, but it is possible to change the resolving in detail. Have a look at Module Resolution for more explanation of how the resolver works.
Configure how modules are resolved. For example, when calling import 'lodash' in ES2015, the resolve options can change where webpack goes to look for 'lodash' (see modules).
These are the defaults each option starts from. Where a default depends on the target or on how a module is requested, the option's own section below gives the exact rules.
extensions, mainFields, aliasFields and conditionNames are additionally refined per dependency type through resolve.byDependency — a require() and an import of the same package can resolve to different files. The table there lists those values.
Create aliases to import or require certain modules more easily. For example, to alias a bunch of commonly used src/ folders:
Now, instead of using relative paths when importing like so:
you can use the alias:
A trailing $ can also be added to the given object's keys to signify an exact match:
which would yield these results:
You can also use wildcards (*) in your alias configuration to create more flexible mappings:
This allows you to use imports like:
The following table explains other cases:
index.js may resolve to another file if defined in the package.json.
/abc/node_modules may resolve in /node_modules too.
resolve.alias takes precedence over other module resolutions.
null-loader is deprecated in webpack 5. use alias: { xyz$: false } or absolute path alias: {[path.resolve(__dirname, './path/to/module')]: false }
string[] values are supported since webpack 5.
Setting resolve.alias to false will tell webpack to ignore a module.
To ignore modules based on a regex, you can use IgnorePlugin
(string | string[])[] = ['browser']
Specify a field, such as browser, to be parsed according to this specification.
An entry may also be an array of strings, which names a nested field path — [['exports', 'browser']] reads package.json#exports.browser.
Configure resolve options by the type of module request.
webpack ships defaults for the dependency types it knows, which is why an import and a require() of the same request can resolve differently. '...' stands for the value configured outside byDependency:
mainFiles: [] for CSS is deliberate: a CSS @import never resolves a directory to a main file, so the full path has to be written out.
Type: [type: string]: ResolveOptions
Enables caching of successfully resolved requests, allowing cache entries to be revalidated.
(request: ResolveRequest) => boolean
A function which decides whether a request should be cached or not. It receives the ResolveRequest being resolved — an object carrying path and request among other properties — and must return a boolean.
If unsafe cache is enabled, includes request.context in the cache key. This option is taken into account by the enhanced-resolve module. Set it to false to exclude the context from the cache key.
Condition names for exports field which defines entry points of a package.
Webpack will match export conditions that are listed within the resolve.conditionNames array.
The default conditionNames are composed dynamically based on the mode and target configuration:
The base conditions always include:
Additional conditions are appended depending on the target:
For example, with target: "web" (the default) and mode: "production", the base conditionNames defaults to ["webpack", "production", "browser"].
Webpack further adjusts conditionNames through resolve.byDependency depending on how a module is imported. The "..." token inherits from the base conditions above.
5.107.0+ "module-sync" is included in the default conditions to align with Node.js, which exposes the module-sync community condition for synchronously-loadable ESM. Packages that publish a module-sync export in their package.json are picked up automatically without additional configuration.
For instance, when a file uses import in a project with target: "web" and mode: "production", the final resolved conditions are ["import", "module-sync", "module", "webpack", "production", "browser"].
The resolveLoader option uses different defaults for conditionNames: ["loader", "require", "node"]. See resolveLoader.