如何在 webpack 中设置主路径

Question

我有一个React项目，我正在使用webpack来生成一个捆绑包。

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

例如，如果我有一个这样的结构，我的导入将是这样的：

- src
- actions
- components
- my_component

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

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')

您可以在此处阅读更多内容：https://webpack.js.org/configuration/entry-context/