Question

我有一个React项目，我使用webpack生成一个包。

在我的组件中，我使用相对路径引用其他组件。

例如，如果我有这样的结构，这就是我的导入的样子：

- src
   - actions
   - components
         - my_component

如果我想在action中导入my_component，我会这样做。

import {my_action} from ../actions

我告诉我的组件go up one level, go into actions and pick up my_action from there。

我知道可以像这样进行导入：

import {my_action} from @/actions

我想说from the root directory, go into actions and pick up my_action from there。

我的问题是，如何在项目中将@用作项目根？

谢谢！

修改1

我用create-react-app启动了我的应用并弹出了。我保留了结构，所以我有这样的东西：

- frontend
    - config
        - webpack.config.dev
        - webpack.config.prod
    - src
        - actions
        - my_components

由于这种结构，我在webpack.config个文件中添加了这个。

let up = path.resolve(__dirname, '..');
let src_path = path.resolve(up, 'src');

我记录了src_path，看起来对我来说是正确的，也就是说，就像这样。

/path/to/my/project/frontend/src

我必须这样做，因为只是以path.resolve(__dirname, "src")结尾/path/to/my/project/frontend/config/src，这显然是不正确的。

即使我导出context: src_path，我仍然会收到此错误：

Module not found: Can't resolve '~/actions' in '/path/to/my/project/frontend/src/my_components'

我是否可能对我的path.resolve做错了？

Answer 1

将webpack.config.js文件放在前端目录中的最佳做法，不应该这样做：

let up = path.resolve(__dirname, '..'); let src_path = path.resolve(up, 'src');

这样做：

let src_path = path.resolve(__dirname, 'src');

对于使用短文件或模块名称，您应该使用webpack.config.js中的resolve.alias定义别名。

例如：

resolve: { alias: { Actions: './actions', //OR ActionFirst: './actions/action-first', },

你可以使用这个别名：

import ActionFirst from 'Actions/action-first'; //OR import ActionFirst from 'ActionFirst';

Answer 2

使用React和ES6，您甚至可以执行以下操作：

import {my_action} from '~actions';

要在webpack.config.js文件中实现这一点，请将context设置为导出的属性之一：

context: path.resolve(__dirname, './src')