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