Module Resolution

A resolver is a library that locates a module by its absolute path. When one module depends on another, it requires it like this:

import foo from 'path/to/module';

// or

require('path/to/module');

The dependency can come from your own application code or from a third-party library. For every such require/import statement, the resolver tells webpack where to find the module's code so it can be included in the bundle. webpack uses enhanced-resolve to resolve file paths while bundling modules.

With enhanced-resolve, webpack can resolve three kinds of file paths.

import '/home/me/file';

import 'C:\\Users\\me\\file';

Since the absolute path to the file is already known, no further resolution is needed.

import '../src/file1';
import './file2';

Here, the directory of the source file containing the import or require is used as the context directory. The relative path is joined to that context to produce the absolute path of the module.

import 'my-module';
import 'my-module/lib/file';

Modules are searched for in every directory listed in resolve.modules. You can substitute a different path for the original module path by defining an alias through the resolve.alias configuration option.

• If the package contains a package.json file, the fields listed in the resolve.exportsFields configuration option are checked in order. The first matching field in package.json determines the package's available exports, following the package exports guideline.

Once the path is resolved by the rules above, the resolver checks whether it points to a file or a directory. If it points to a file:

• If the path already has a file extension, the file is bundled directly.
• Otherwise, the extension is resolved using the resolve.extensions option, which lists the extensions that are acceptable for resolution, such as .js or .jsx.

If the path points to a folder, the following steps are taken to find the correct file with the correct extension:

• If the folder contains a package.json file, the fields listed in the resolve.mainFields configuration option are checked in order, and the first matching field in package.json determines the file path.
• If there is no package.json, or if resolve.mainFields does not yield a valid path, the file names listed in the resolve.mainFiles option are tried in order to see whether a matching file exists in the imported directory.
• The file extension is then resolved as before, using the resolve.extensions option.

webpack provides sensible defaults for these options based on your build target.

Loader resolution follows the same rules as file resolution. However, the resolveLoader configuration option lets you define separate resolution rules specifically for loaders.

Every filesystem access is cached, so repeated requests to the same file, whether parallel or serial, resolve faster. In watch mode, only modified files are evicted from the cache. When watch mode is off, the cache is purged before every compilation.

See the Resolve API to learn more about the configuration options mentioned above.