Why doesn't websotrm see alias from webpack?

Question

JavaScript

Webpack has the following alias for images:

alias: {
    assets: path.resolve(__dirname, './src/static/assets')
},

Referring to image in html:



And webstorm doesn't understand alias, and hence no autocomlit. But webpack builds everything fine:

Answer 1

jsconfig.json at the root of the project helps me

{ 
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

Answer 2

I have so. Add your alias and if needed restart WebStorm/PhpStorm

// webpack.config.js

const path = require('path');

function resolve(dir) {
  return path.resolve(__dirname, dir);
}

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'],
    alias: {
      '@': resolve('src/'),
    },
  },
};

Answer 3

Perhaps he needs to explicitly point to the config:

Answer 4

Understood. It was a WEB-38331 WebStorm bug. It has been fixed since version 2020.2.1.