Original translation, please indicate the source when reprinting.
Original address: https://webpack.js.org/concepts/module-resolution/
Module resolution
A parser is a library that finds modules based on their absolute path. A module can be requested as a dependency by another module using the following methods:
import foo from'path/to/module'
// or
require('path/to/module')
Dependent modules can be application code or third-party libraries. At each require/import statement, the parser helps webpack find the modules' code and include them in the bundle. Webpack uses the enhance-resolve library when bundling modules.
Parsing rules in webpack
Using the enhance-resolve library, webpack can resolve three file paths:
absolute path
import"/home/me/file"; import"C:\\Users\\me\\file";
Because we already have the absolute path to the file, no extra parsing is required
relative path
import"../src/file1"; import"./file2";
In this example, the directory of the imported or required resource files is a context directory. The relative directory specified in Import/require is added to the context path, claiming the absolute path to the module.
module path
import"module"; import"module/lib/file";
Look for modules in all directories specified in resolve.modules. You can create aliases by using the configuration file option resolve.alias to replace the source module path with an alternate path.
Once the path is resolved by the above rules, the parser checks whether the path points to a file or a directory. If pointing to a file:
- If the file has an extension, the file is packaged directly.
- Otherwise, use the resolve.extensions option to resolve file extensions. This option tells the resolver which extensions (eg: .js, .jsx) are acceptable for resolution.
If you point to a folder, you will go through the following steps to find the correct file and correct suffix:
- If there is a package.json file in the folder, then the fields defined in the resolve.mainFields option of the configuration file will be viewed in turn, and the first field in package.json determines the file path.
- If there is no package.json file, or the main subsection does not return a valid path, the filenames defined in the resolve.mainFiles configuration option are sequentially looked up to see if there is a matching file in the referenced or requested directory name.
- File suffixes will be resolved in the same way, referring to the resolve.extensions option.
Webpack provides reasonable defaults for the options you need.
parse loader
Follows the same rules for file parsing as specified. But the resolveLoader configuration option can be used to have separate resolveloader rules.
cache
Every filesystem access is cached, so that multiple parallel or sequential requests for a file can speed things up. In watch mode, only modified files are removed from the cache. If watch mode is turned off, the cache will be flushed before each compilation.
Check out the ResolveAPI to learn more about the configuration options mentioned above.
-- End --