-
Notifications
You must be signed in to change notification settings - Fork 127
resolving
Resolve is used to find "import" and "require" references that are not immediately available in the current path. For example: how a call to require("../homepage")
might be translated to ("../homepage/index.js")
or how an import react from 'react'
might be interpreted if your node_modules
folder is named something else. For more configuration options click here
The resolving process is pretty simple and distinguishes between three types of requests:
- absolute path:
require("/home/me/file")
,require("C:\\Home\\me\\file")
- relative path:
require("../src/file")
,require("./file")
- module path:
require("module")
,require("module/lib/file")
We first check if the path points to a directory. For a directory we need to find the main file in this directory. Therefore the main
field in the package.json
is joined to the path. If there is no package.json
or no main
field, index
is used as filename.
Now that Resolve has an absolute path to a file it attempts to append all extensions (configuration option: resolve.extensions
). The first existing file is used as the result.
Webpack's context
value is assumed to be the directory of the resource file that contains the require
statement. If no resource file is found at Webpack's context
, Resolve's context
configuration option is used as the context directory. (This can occur for entry points or with loader-generated files).
When the resource file is found, its relative path is joined to the context directory and the resulting absolute file is resolved according to "Resolving an absolute path".
For resolving a module Resolve first gathers all search directories for modules from Webpack's context
directory. This process is similar to the node.js resolving process, but the search directories are configurable with the configuration option resolve.modulesDirectories
. In addition to this the directories in the configuration option resolve.root
are prepended, and directories in the configuration option resolve.fallback
are appended.
The module is looked up in each module directory and resolved according to "Resolving an absolute path". If the first match has no success, the second is tried, and so on.
Resolve's configuration option resolve.alias
renames modules.
When trying to "resolve a module path" the module name is matched to the resolve.alias
option. When there is a match, the matching module name is replaced with the alias.
Every filesystem access is cached so that multiple parallel or serial requests to the same resource are merged. In watching mode only changed files are removed from cache (the watcher knows which files have been changed). In non-watching mode the cache is purged before every compilation.
Resolve's configuration option resolve.unsafeCache
boosts performance by "aggressive caching". This means that every resolve process is cached and isn't ever purged. This results in correct behavior in most cases, but there is a chance of incorrect behavior in edge cases.
When trying to resolve a context "Resolving an absolute path" ends when a directory is found.
For loaders the configuration options in resolveLoader
are used.
Additionally, when trying to "resolve a module path" all module name variations in Resolve's configuration option resolveLoader.moduleTemplates
are tried.
The above description suggests a serial process, but in the implementation the process is completely asynchronous and parallel. This may cause more filesystem access than required.
webpack 👍