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'; 应该可以工作。您可以根据自己的喜好调整别名。

Webpack-resolve.moduleDirectories

Webpack - resolve.moduleDirectories

webpack