react中设置短链接

原因
比如，我page要引入一个页面，那么引入起来就很麻烦。
图片在src\assets\img\login\bg.jpg
组件在src\pages\login\index.tsx
引入代码如下：

import React from 'react';
import style from './style.less';
import bg from '../../assets/img/login/bg.jpg';

const Login = () => {
  return (
    

      
    
  );
}

export default Login;

 

设置短链接
其实这是利用webpack的功能alias。
运行npm run eject暴漏webpack的配置文件config/webpack.config.js
全局搜索alias: { 然后添加，如下配置：

alias: {
  '@assets':path.join(__dirname,'..','src/assets')
   ...
},

 

新办法引入图片

import bg from '@assets/img/login/bg.jpg';

 或者在css中使用

 background-image: url("~@assets/img/login/bg.jpg");

 

 

 

background-image:  url( "~@assets/img/login/bg.jpg" );