Resolver and it’s story

webpack, being a module bundler, needs to resolve files and directories. To resolve a file is to find the absolute path of that file in your filesystem.

webpack basically only knows the path of the entry point at the beginning of compilation. It is then able to read the entry file, find all it’s dependency files, read them and so on to build the dependency graph of your codebase. To do this, it needs to be able to find the dependency file just from the import/export statements in your file.

When webpack encounters import, it defers the finding of the actual module to the resolver.

The job of the resolver is to look at the given file and find it’s location with respect to the context provided. The context is either the directory from which webpack is run or can be provided as a parameter in webpack's configuration.

Examples

import a from '../a';
// '../a' can resolve to 'Users/<username>/folder/<contextfolder>/a.js' .webpack can add externsions 
import React from 'react';
// 'react' can be found at 'Users/.../node_modules/react/dist/index'
import {myfunc} from 'mydir/myhelper';
//mydir is aliased. webpack detects this.

You can configure this resolver to have various parameters like extension support and aliases. It is documented here.