You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Proofread concepts and revisited the "how resolution happens if a folder is specified" section to include information about `resolve.mainFields` and `resolve.mainFiles`
Copy file name to clipboardExpand all lines: content/concepts/module-resolution.md
+28-25Lines changed: 28 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -3,29 +3,31 @@ title: Module Resolution
3
3
sort: 8
4
4
contributors:
5
5
- pksjce
6
+
- pastelsky
6
7
---
7
8
8
-
A resolver is a library which helps find the absolute path of a module.
9
-
A module can be required as a dependency from another module as
9
+
A resolver is a library which helps in locating a module by its absolute path.
10
+
A module can be required as a dependency from another module as:
10
11
11
12
```js
12
-
importmymodulefrom'path/to/module'
13
+
importmodulefrom'path/to/module'
13
14
// or
14
15
require('path/to/module')
15
16
```
16
17
17
18
The dependency module can be from the application code or a third party library. The resolver helps
18
-
`webpack` find the module code that needs to be included in the bundle for every such `require()/import` statement.
19
-
`webpack` uses [enhanced-resolve](https://github.com/webpack/enhanced-resolve) to resolve file paths while bundling modules.
19
+
webpack find the module code that needs to be included in the bundle for every such `require`/`import` statement.
20
+
webpack uses [enhanced-resolve](https://github.com/webpack/enhanced-resolve) to resolve file paths while bundling modules.
20
21
21
22
## Resolving rules in webpack
22
23
23
-
`webpack` resolves three kinds of file paths
24
+
Using `enhanced-resolve`, webpack can resolve three kinds of file paths:
24
25
25
-
### Absolute paths
26
+
### 1. Absolute paths
26
27
27
28
```js
28
29
import"/home/me/file";
30
+
29
31
import"C:\\Users\\me\\file";
30
32
```
31
33
@@ -34,39 +36,40 @@ Since we already have the absolute path to the file, no further resolution is re
34
36
### Relative paths
35
37
36
38
```js
37
-
import"../src/file";
38
-
import"./file";
39
+
import"../src/file1";
40
+
import"./file2";
39
41
```
40
42
41
-
In this case, the directory of the resource file is taken to be the context directory (the directory of the currently processed file). The given relative path is joined to the context path to produce the absolute path to the file.
43
+
In this case, the directory of the resource file where the `import` or `require` occurs is taken to be the context directory. The relative path specified in the `import/require`is joined to this context path to produce the absolute path to the module.
42
44
43
-
### Module path
45
+
### Module paths
44
46
45
47
```js
46
48
import"module";
47
49
import"module/lib/file";
48
50
```
49
51
50
-
Modules are searched for inside directories which are specified using `resolve.modules`, which can be an array comprised of different paths.
51
-
Aliasing, i. e. setting `resolve.alias` to an existing module path, allows you to replace the module path with an alias name during `require/import`.
52
+
Modules are searched for inside all directories specified in [`resolve.modules`](/configuration/resolve/#resolve-modules).
53
+
You can replace the original module path by an alternate path by creating an alias for it using [`resolve.alias`](/configuration/resolve/#resolve-alias) configuration option.
54
+
55
+
Once the path is resolved based on the above rule, the resolver checks to see if the path points to a file or a directory. If the path points to a file:
56
+
* If the path has a file extension, then the file is bundled straightaway.
57
+
* Otherwise, the file extension is resolved using the [`resolve.extensions`](/configuration/resolve/#resolve-extensions) option, which tells the resolver which extensions (eg - `.js`, `.jsx`) are acceptable for resolution.
52
58
53
-
Once the path is resolved based on the above rule, the resolver checks if the path points to a file or to a directory. If the path points to a file then it is bundled straightaway.
54
-
But if the path points to a folder, then the following steps are taken to find the right file with the right extension.
55
-
*The right file is determined using the `main: "<filename>.js"` field in `package.json`.
56
-
*If there is no package.json or the main file is not found, `resolve.mainFiles` configuration option is looked up.
57
-
* If this also fails, then it looks for a file named `index` by default.
58
-
*`resolve.extensions` tells the resolver which extensions (eg - `.js, .jsx`) are acceptable for resolution.
59
+
If the path points to a folder, then the following steps are taken to find the right file with the right extension:
60
+
* If the folder contains a `package.json` file, then fields specified in [`resolve.mainFiles`](/configuration/resolve/#resolve-mainfields) configuration option are looked up in order, and the first such field in `package.json` determines the file path.
61
+
*If there is no `package.json` or if the main fields do not return a valid path, file names specified in the [`resolve.mainFiles`](/configuration/resolve/#resolve-mainfiles) configuration option are looked for in order, to see if a matching filename exists in the imported/required directory .
62
+
*The file extension is then resolved in a similar way using the `resolve.extensions`option.
63
+
64
+
Webpack provides reasonable [defaults](/configuration/resolve) for these options depending on your build target.
59
65
60
66
## Resolving Loaders
61
67
62
-
This follows the same rules as the file resolver. But `resolveLoader` configuration can be used to have separate resolution rules for loaders.
68
+
This follows the same rules as those specified for file resolution. But the [`resolveLoader`](/configuration/resolve/#resolveloader) configuration option can be used to have separate resolution rules for loaders.
63
69
64
70
## Caching
65
71
66
-
Every filesystem access is cached so that multiple parallel or serial requests to the same thing are merged. In watching mode only changed files are removed from cache (the watcher knows which files got changed). In non-watching mode the cache is purged before every compilation.
67
-
68
-
### Unsafe caching
72
+
Every filesystem access is cached, so that multiple parallel or serial requests to the same file occur faster. In [watch mode](/configuration/watch/#watch), only modified files are evicted from the cache. If watch mode is off, then the cache gets purged before every compilation.
69
73
70
-
There is a configuration option `resolve.unsafeCache` which boosts performance by aggressive caching. Every resolve process is cached and isn’t ever purged. This is correct in most cases, but incorrect in edge cases (what edge cases?).
71
74
72
-
Look at [Resolve API](/configuration/resolve)for more info on the configuration mentioned above.
75
+
Look at [Resolve API](/configuration/resolve)to know more on the configuration options mentioned above.
0 commit comments