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对象的一种好方法是什么？

Answer 1

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

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

Answer 2

您可以将代码包装到node_modules目录中的src中，并且可以从root身份从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'

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

2 个答案: