# Module resolution — Webpack: Module Bundling and Build Optimization

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

> Understand Webpack module resolution, then set up aliases and file extensions for cleaner, easier-to-refactor imports.

## 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?

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

*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.