配置webstorm识别@符号（路径别名）

习惯于使用webstorm做开发，在使用vue 或 react脚手架过程中发现 使用@符号 import 组件或者资源 webstorm 会用波浪线进行标识，并提示无法识别路径，我们也无法直接点击路径去追踪资源，虽然对项目的运行没有影响，但对于有代码洁癖的我还是忍不了，而且无法通过点击去追踪资源 也使得开发不便。

解决方案：
1.在项目根目录创建任意名称的js 文件：
webstorm.webpack.config.js

'use strict'
const path = require('path')

module.exports = {
    context: path.resolve(__dirname, './'),
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': path.resolve('src'),
            '@/com': path.resolve('src/components'),
            // 根据项目所需 可以在这里定义任意个别名
        }
    }
}

2.webstorm 进入 Settings -> languages & Frameworks -> Javascript -> webpack
可以看到 webpack configuration file,将这里的文件路径指向 前面创建的js文件就可以了。