Is it possible to do custom imports with Webpack like it is with Browserify?

Question

So in my projects I tend to have a lot of custom scripts, as well as components etc.

I really don't like this pattern of importing things:

import Navigation from '../../Navigation/Navigation.js

/* or */

import Navigation from 'src/universal/components/Navigation/Navigation.js'

Is it possible to declare an entry point via Webpack like it is with Browserify? I am making the switch now and will sorely miss this functionality if it's not possible

With Browserify, declaring custom imports is as easy as including this in your package.json:

"browser": {
  "navigation": "src/universal/components/Navigation/Navigation"
}

Then, to import anywhere, it's as simple as:

import Navigation from 'navigation'

How does one do this via Webpack?

Answer 1

You can try use resolve.alias

resolve.alias - Replace modules by other modules or paths.

webpack.config.js

resolve: {
  alias: {
     navigation: 'src/universal/components/Navigation/Navigation'
  }
}