在react项目中配置alias-[webpack配置]

alias是webpack中用来配置路径别名的，在路径嵌套特别深的项目中，对于路径的导入非常友好。

webpack中的alias

create-react-app搭建的react项目中配置alias

1. 先运行脚本eject npm run eject | yarn run eject
2. 找到项目中paths.js文件

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp(buildPath),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  appJsConfig: resolveApp('jsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  swSrc: resolveModule(resolveApp, 'src/service-worker'),
  appSrcComponents : resolveApp("src/components"), // 自己加的路径配置
  
  publicUrlOrPath,
};

3. 在paths.js同目录下找到webpack.config.js，并修改里面的resolve.alias

alias: {
    'react-native': 'react-native-web',        
    ...(isEnvProductionProfile && {
      'react-dom$': 'react-dom/profiling',
      'scheduler/tracing': 'scheduler/tracing-profiling',
    }),
    ...(modules.webpackAliases || {}),
    'Components' : paths.appSrcComponents // paths包含了paths.js导出的配置路径
  },

配置好后，就可以使用别名了

import "Components"; // 默认导入index.js

src/components/index.js

console.log("webpack中resolve.alias");