Webpack - resolve.moduleDirectories

Question

我遇到了Webpack resolve.moduleDirectories config的問題。文檔是非常簡單的，但我無法得到它的工作。

鑑於以下結構

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';後應該工作。你可以根據自己的喜好調整別名。