Path aliases in WebStorm as in webpack

Question

We have file structure like

/common
    /src
        /componentA
        /componentB    

And would like to use webpack aliases

resolve: {
  alias: {
    common: 'common/src'
  }
}

to require modules like

require('common/componentA')

Is there any way to teach WebStorm to resolve this to save option by navigation using Ctrl+Click ?

ResourceRoot option doesn't help for this case

Answer 1

It's not possible to get webstorm to read your webpack aliases, so you have to have 2 different "config setups" for this. Just means that you have to maintain webpack's alises and also webstorm's resources.

In webstorm just right click a folder and "Mark directory as" > "Resource root".

This is kind of a duplicate of this and there's a better answer here .

Answer 2

Since Webstorm 2017.2 you can set webpack config file and it will recognize you aliases: