Webpack-module Resolution (module parsing)

Module parsing (modules Resolution)

Resolver is a library that helps find the absolute path to a module. A module can be used as a dependency module for another module and then referenced by the latter, as follows:

Import foo from 'path/to/module'//  or require ('path/to/module')

The module you rely on can be a library from your application code or a third party. Resolver Help Webpack find the module code that needs to be introduced in the bundle, which is contained in each require / import statement. webpackuse Enhanced-resolve to parse file paths when packaging a module

parsing rules in Webpack

Using enhanced-resolve , Webpack can parse three file paths:

Absolute Path

Import "/home/me/file" "c:\\users\\me\\file";

Since we have obtained the absolute path to the file, we do not need to parse it further.

relative Path

Import ". /src/file1""./file2";

In this case, the import require directory where the resource files (resource file) are used or are considered to be contextual directories (context directory). In the import/require relative path given in, this context path is added to produce the absolute path of the module (absolute path).

Module Path

Import "module""module/lib/file";

The module will resolve.modules search within all directories specified in.

You can replace the initial module path, which resolve.alias creates an alias by using the configuration option.

Once the path is parsed according to the above rules, the parser (resolver) checks to see if the path points to a file or directory. If the path points to a file:

• If the path has a file name extension, the file is packaged directly.
• Otherwise, the [] option will be used resolve.extensions as the file extension to resolve, which tells the parser which extensions (for example,) can be accepted in the resolution .js .jsx .

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

• If the folder contains package.json files, the fields specified in the configuration options are found in order resolve.mainFields . And package.json the first of these fields determines the file path.
• If the package.json file does not exist or if package.json the main field in the file does not return a valid path, the file name specified in the configuration option is searched sequentially to resolve.mainFiles see if it can match to an existing file name in the Import/require directory.
• The file extension resolve.extensions is parsed using the option in a similar way.

Webpack provides a reasonable default configuration for these options based on the build target.

parsing Loader (resolving loaders)

Loader parsing follows the same rules as the rules specified by the file parser.

However resolveLoader , configuration options can be used to provide independent parsing rules for Loader.

Cache

Each file system access is cached so that multiple concurrent or serial requests to the same file are triggered more quickly.

In observation mode, only modified files are picked out from the cache.

If you turn off observation mode, the cache is cleaned up before each compilation.

For more information on the above configuration, see Parsing API learning.

Webpack-module Resolution (module parsing)