在 React 应用程序中使用 Webpack resolve.alias 绝对导入

Question

我正在开发一个不是用create-react-app构建的 React 应用程序，并尝试与 Webpack 一起工作以使绝对导入工作。 应用程序结构如下所示：

.
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── actions
│   ├── components
│   │   └── App.js
│   ├── index.css
│   ├── index.js
│   ├── reducers
│   │   └── index.js
│   ├── storage
│   │   └── index.js
│   └── store.js
└── webpack.config.js

我有store.js文件和storage目录的原因是因为绝对导入不起作用（这就是为什么我通过从store.js相对导入来使其工作）。 根据他们的文档和其他 SO 线程，以下是我在webpack.config.js中为绝对导入所做的事情：

resolve: {
        alias: {
            src: path.resolve(__dirname, 'src/'),
        },
        extensions: ['.js']
},

但是，尽管添加了规则，我仍然收到以下错误：

ERROR in ./src/storage/index.js
Module not found: Error: Can't resolve './reducers' in '/my-project/src/storage'

我只是在做一个import rootReducer from './reducers'; 来自错误来自的storage/index.js文件。 在这种情况下，正确配置 webpack.alias object 的好方法是什么？

Answer 1

正如 Prakash 上面指出的，这就是我需要做的：

resolve: {
        alias: {
            components: path.resolve(__dirname, 'src/components'),
            reducers: path.resolve(__dirname, 'src/reducers')
        },
        extensions: ['.js']
    },

Answer 2

您可以将代码包装到src目录中的node_modules中，并且可以从 src 以从根目录导入

.
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   └── node_modules
│       ├── actions
│       ├── components
│       │   └── App.js
│       ├── index.css
│       ├── index.js
│       ├── reducers
│       │   └── index.js
│       ├── storage
│       │   └── index.js
│       └── store.js
└── webpack.config.js

import App from 'components/App'