Webpack - resolve.moduleDirectories

Question

Si verificano problemi con la configurazione Webpack resolve.moduleDirectories. La documentazione è davvero semplice, ma non riesco a farlo funzionare.

Data la seguente struttura

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

Vorrei utilizzare il componente shared/buttons/SignUp.js su diverse parti del mio app, quindi suppongo che avrei dovuto utilizzare le seguenti impostazioni WebPack:

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

Da Reports/index.js, non riesco ancora a includere il pulsante, anche provando quanto segue:

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

C'è qualcosa che mi manca o che non funziona? Ho inserito un esempio qui: https://github.com/henriquebf/resolve-webpack

Answer 1

Se si desidera utilizzare le importazioni in questo modo, è possibile impostare resolve.alias.

Esempio:

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

Dopo questa modifica import SubmitButton from 'shared/buttons/SignUp'; dovrebbe funzionare. Puoi modificare alias a tuo piacimento.