React alias 别名模块配置

该配置适用于由 create-react-app 脚手架构建的项目，找不到 webpack.config.js 需要先 npm run eject 释放配置文件

alias: {
        // Support React Native Web
        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
        'react-native': 'react-native-web',
        // Allows for better profiling with ReactDevTools
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        "@":path.resolve(__dirname,'../src')
      },

import '@/style/index.css';
import App from '@/pages/App';

与vue cli 3 脚手架配置别名对比

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@assets',resolve('src/assets'))
  }
};