Webpack和Typescript的别名配置

需求

项目技术栈：webpack + typescript + eslint
代码中多次使用相对路径导入模块，看起来复杂且不美观，如下：

import fetch from '../../../../utils/fetch';

如何将上面的代码进行优化呢？

import fetch from 'utils/fetch';

方案

step1: 配置webpack的resolve.alias

module.exports = {
    
    
  entry: {
    
    
    main:'./main.js',
  },
  output: {
    
    
    path:__dirname+'/dist',
    filename: '[name].js'
  },
  resolve:{
    
    
    //配置别名，在项目中可缩减引用路径
    alias: {
    
    
      'utils': resolve('app/utils'),
      'assets': resolve('app/assets')
    }
  },
  plugins: []
};

step2: 配置tsconfig.json

{
    
    
	compilerOptions: {
    
    
		"baseUrl": ".",
	    "paths": {
    
    
	      "utils/*": ["app/utils/*"],
	      "assets/*": ["app/assets/*"],
	    }
	}
}

ESLint 报错 import/no-unresolved

解决办法：

1. 网上推荐【未尝试】
2. 暴力解决：重启vscode【确实可以了，如果再碰到再说吧】