Welcome to wechat public account: Front Reading Room

Resolver is a library that helps you find absolute paths to modules. A module can act as a dependent module of another module and then be referenced by the latter, as follows:

import foo from 'path/to/module';
/ / or
require('path/to/module');
Copy the code

The dependent modules can be code from the application or third-party libraries. Resolver helps WebPack find the module code that needs to be imported into the bundle from each require/import statement. When packaging modules, Webpack uses enhanced-resolve to resolve file paths.

Parsing rules in WebPack

With enhanced- Resolve, WebPack can resolve three file paths:

An absolute path

import '/home/me/file';

import 'C:\\Users\\me\\file';
Copy the code

Since you already have the absolute path to the file, no further parsing is required.

Relative paths

import '.. /src/file1';
import './file2';
Copy the code

In this case, the directory in which the resource files that use import or require reside is considered a context directory. The relative path given in import/require is concatenated to generate the module’s absolute path.

The module path

import 'module';
import 'module/lib/file';
Copy the code

Retrieves modules from all directories specified in resolve.modules. You can replace the initial module path by configuring an alias, refer to the resolve.alias configuration option.

  • If package contains package.json files, the fields specified in the resolve.exportsFields configuration option will be looked up in turn, The first field in package.json determines which exports are available in the package according to the Package export guide.

Once the path has been resolved according to the rules above, resolver will check whether the path points to a file or folder. If the path points to a file:

  • If the file has an extension, it is packaged directly.
  • Otherwise, the resolve.extensions option is used as the file extension, which tells the parser which extensions (e.g..js,.jsx) can be accepted in the resolution.

If the path points to a folder, do the following to find the file with the correct extension:

  • If the folder contains package.json files, the file path is determined based on the first field in the package.json configuration that meets the configuration requirements.
  • If a package.json file is not present or resolve.mainFields does not return a valid path, the order of the file names specified in the resolve.mainFiles configuration option is searched, See if you can match an existing file name in the import/require directory.
  • Then use the resolve.extensions option to resolve the file extension in a similar manner.

Webpack provides reasonable default configurations for these options, depending on the build goals.

Parsing the loader

Loader resolution rules also follow specific specifications. However, the resolveLoader configuration item can set independent resolution rules for the Loader.

The cache

The file is cached each time the file system accesses the file to trigger multiple parallel or serial requests for the same file more quickly. In Watch mode, only modified files are removed from the cache. If watch mode is turned off, the cache is cleared before each compilation.

For more information on the above configuration, refer to the Resolve API.

Welcome to wechat public account: Front Reading Room