如何在Webpack中配置根路径简化React项目模块导入

嘿，这个需求太常见了！在Webpack里配置**别名（Alias）**就能轻松实现用@/xxx代替繁琐的相对路径导入，我给你分场景一步步讲清楚怎么弄：

1. 普通Webpack项目（非CRA） #

首先找到你的Webpack配置文件（一般是webpack.config.js），先引入Node的path模块，然后在resolve配置项里添加别名：

const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      // 把@指向项目根目录下的src文件夹，根据你的实际目录结构调整
      '@': path.resolve(__dirname, 'src')
    }
  }
};

配置完之后，不管你的组件在src/components/xxx还是src/pages/yyy，都可以直接用import { my_action } from '@/actions'来导入src/actions下的模块，再也不用数../的层级啦！

2. TypeScript项目额外配置 #

如果你的项目用了TypeScript，光配置Webpack还不够，TS编译器会识别不了这个别名，所以需要在tsconfig.json里补充paths配置：

{
  "compilerOptions": {
    // ...其他配置
    "baseUrl": "src", // 基础路径设为src
    "paths": {
      "@/*": ["*"] // 让@/*对应src下的所有文件
    }
  }
}

这样VS Code之类的编辑器也能正常给出代码提示，不会再飘红报错了。

3. Create React App（CRA）项目 #

CRA默认隐藏了Webpack配置，不能直接修改，这时候可以用react-app-rewired和customize-cra来覆盖默认配置：

第一步：安装依赖 #

npm install react-app-rewired customize-cra --save-dev

第二步：创建配置文件 #

在项目根目录新建config-overrides.js，写入以下内容：

const path = require('path');
const { override, addWebpackAlias } = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src')
  })
);

第三步：修改package.json的scripts #

把原来的react-scripts替换成react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

做完这些，CRA项目也能愉快地用@别名导入模块了！

最后提醒一句：确保你的actions文件夹确实在src目录下哦，不然路径还是会出错～

内容的提问来源于stack exchange，提问作者mayk93