WebStorm|导入模块报黄无法跳转

背景

项目成功build后，所有js中声明导入的语句，只要是工程内的本地组件都有黄色警告，点击对应内容无法跳转

import foo from '@components/foo';
import bar from '@components/bar';

原因在于工程框架使用了别名的方式，这里使用的是umi，umi 底层整合了 webpack ,所以项目中也会用到别名路径

解决方案

在src同级目录下创建webstorm.config.js

'use strict';

const path = require('path');

module.exports = {
  context: path.resolve('./'),
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      //结合项目具体情况进行配置   
      '@': path.resolve('src/'),
      '@components': path.resolve('src/components/'),
      '@utils': path.resolve('src/utils/'),
      '@assets': path.resolve('src/assets/'),
      '@apis': path.resolve('src/apis/'),
      '@pages': path.resolve('src/pages/'),
    },
  },
};

之后通过 Webstorm 的 [Setting] - [Languages & Frameworks] - [Webpack] 中选择手动引用 webstorm.config.js

刷新即可看到原先的警告消失，同时点击文件也可以跳转到对应的组件内容