A module path is something that not all JavaScript developers may be used to. With Webpack, it refers to a location relative to a module. In the following code snippet, module would be co-opted for the name of any specific module name you wish to use—the name of an existing module in your project, for example:

import 'module/sub-directory/file';

Webpack 5 searches all the directories for modules that are specified in the resolve.module directive. An alias can be created for each original module file path using the resolve.alias configuration. Using this method, Webpack 5 checks the file path and whether it points to a file or directory.

Webpack 5 has an option called resolve.extension. If a path does not have a file extension, this resolver will indicate to Webpack which extensions can be used for resolution. These might include .js, .jsx, or similar extensions.

In the event of a file path not pointing to a file but only to a directory, Webpack 5 searches the directory for a package.json file. Webpack 5 then uses the fields specified in the resove.main field's configuration to search for fields contained in package.json and, from this, determines the correct contextual file path to use.

If there is no package.json file present in the directory, or if the main fields do not return a valid path, Webpack 5 simply searches for filenames specified in the resolve.main configuration.

File extensions are resolved similarly, but using the resolve.extension option.

We have, so far, covered modules, path resolution, supported languages, and loaders. The next crucial thing to understand is code splitting—what it is and how Webpack utilizes it to form both its modules and general output.