Webpack resolve alias in PhpStorm/WebStorm

vue.config.js

// @see https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000556284-vue-import-component-Module-is-not-installed-?page=2#community_comment_360000146344
// If you use vue-cli 3:
// Put this file to root folder fo the project
// Open PhpStorm or WebStorm, and goto
// Perferences / Languages & Frameworks / JavaScript / Webpack 
// webpack configuration file: </path/to/project/node_modules/@vue/cli-service/webpack.config.js>

const path = require("path");

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

module.exports = {
  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias.set("@tests", resolve("tests"));
  }
};

webpack.config.js

// @see https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000556284-vue-import-component-Module-is-not-installed-?page=2#community_comment_360000146344
// Put this file to root folder fo the project
// Open PhpStorm or WebStorm, and goto
// Perferences / Languages & Frameworks / JavaScript / Webpack 
// webpack configuration file: </path/to/this/file>

const path = require("path");
const webpackConfig = require("./node_modules/@vue/cli-service/webpack.config");

Object.assign(webpackConfig.resolve.alias, {
  "@tests": path.resolve(__dirname, "./tests")
});

module.exports = webpackConfig;