Webpack Module Resolution

Configuring module resolution

Resolve Extensions

resolve: {
    extensions: ['js', 'jsx', 'json'] # auto resolve extensions
}
// now can import without extension
import App from './App'; # finds App.js or App.jsx

Resolve Alias

resolve: {
    alias: {
        '@': path.resolve(__dirname, 'src/'), # create alias
        'components': path.resolve(__dirname, 'src/components')
    }
}
// usage
import Header from '@/components/Header';

Resolve Modules

resolve: {
    modules: ['node_modules', 'src'] # module directories
}