Webpack - resolve.moduleDirectories

Question

我和Webpack的resolve.moduleDirectories配置有问题。文档确实是直接的，但我无法让它工作。

给定以下结构

app
├── config
│   └── routes.js
├── screens
│   └── App
│       └── screens
│           └── Admin
│               └── screens
│                   └── Reports
│                       └── index.js
├── shared
│   └── buttons
│      └── SignUp.js

我想在我的应用程序的几个部分上使用组件shared/buttons/SignUp.js，所以我想我应该使用以下Webpack设置：

{
  modulesDirectories: ['shared', 'node_modules']
}

在Reports/index.js中，我仍然不能包含按钮，甚至尝试以下所有内容都包括：

import SubmitButton from 'buttons/SignUp.js';
import SubmitButton from 'buttons/SignUp';
import SubmitButton from 'shared/buttons/SignUp';
...

我遗漏了什么或者做错了什么吗？我在这里举了一个例子：https://github.com/henriquebf/resolve-webpack

Answer 1

如果您想使用这样的导入，可以设置resolve.alias。

示例：

resolve: {
    alias: {
        shared: path.resolve(__dirname, 'app', 'shared')
    }
}

在进行此更改之后，import SubmitButton from 'shared/buttons/SignUp';应该可以工作。你可以根据你的喜好修改化名。