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
}