# Module resolution — Webpack

Source: https://www.geekswithgeeks.com/en/webpack/webpack-07

> Understand how Webpack finds and loads modules.

## How Webpack resolves modules

When you import a module, Webpack searches for it using a specific resolution algorithm. It looks in node_modules, checks for file extensions, and follows the resolve configuration. Extensions are checked in order: .js, .json, .wasm. Alias configuration can shorten import paths.

## Configure resolution

Set up aliases and extensions for cleaner imports.

```javascript
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/')
    },
    extensions: ['.js', '.json', '.css'],
    mainFields: ['browser', 'module', 'main']
  }
};
```

Output:

```
Now import '@/components/Button' instead of '../../../components/Button'
```

## Alias reduces import depth

Using aliases makes imports cleaner and refactoring easier. If you move a component, you don't need to update relative paths in dozens of files. Aliases also improve readability by showing intent (e.g., '@' for src root).

Quick check

**Quiz:** What does module resolution do?

- [x] Finds and loads modules according to Webpack's algorithm.
- [ ] Fixes errors in module code.
- [ ] Converts modules to different formats.

*Answer:* Finds and loads modules according to Webpack's algorithm.. Resolution is the process of finding a module file when you import it, following Webpack's configured search paths and extensions.