Module resolution

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.

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

Quick check: What does module resolution do?

• Finds and loads modules according to Webpack's algorithm.
• Fixes errors in module code.
• Converts modules to different formats.