Path aliases for imports in WebStorm

Solution 1:

Yes, there is.

In fact, Webstorm can't automatically parse and apply Webpack config, but you can set up aliases the same way.

You just have to mark the parent folder of "utils" (in your example) as a resource root (right-click, mark directory as / resource root).

We just managed to do with the following structure :

/src
    /A
    /B
    /C

We have A B and C folders declared as alias in Webpack. And in Webstorm we marked "src" as "Resource Root".

And now we can simply import :

import A/path/to/any/file.js

instead of

import ../../../../../A/path/to/any/file.js

while still having Webstorm correctly parsing and indexing all code, link to files, autocompleting and so on ...

Solution 2:

I managed to set up aliases for WebStorm 2017.2 within webpack like this:

Solution 3:

For the record: in PHPSTORM, working with laravel mix, I managed to solve this by creating a webpack.config.js file separately like:

const path = require('path')
const webpack = require('webpack')

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      '~': path.resolve(__dirname, './resources/assets/js')
    }
  },
  ...
}

And then importing it in the webpack.mix.js like:

const config = require('./webpack.config')
...
mix.webpackConfig(config)

Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack

Solution 4:

You can define custom paths, so WebStorm/PhpStorm can understand your aliases. But make sure, they are identical with your aliases. Create file in your root directory and call it something like this: webStorm.config.js (any js file will be ok). Then configure your paths inside:

System.config({
  "paths": {
    "components/*": "./src/components/*",
    "core/*": "./src/core/*",
    ...
  }
});

WebStorm/PhpStorm will recognize System as it's own module and will treat this file as configuration.

Solution 5:

This is answered in a comment but to save people digging into comments and link only information, here it is:

As of WS2017.2 this will be done automatically. The information is here.

According to this, webstorm will automatically resolve aliases that are included within the webpack.config in the root of the project. If you have a custom structure and your webpack.config isn't in the root folder then go to Settings | Languages & Frameworks | JavaScript | Webpack and set the option to the config you require.

Note: Most setups have a base config which then call a dev or prod version. In order for this to work properly, you need to tell webstorm to use the dev one.