Webpack - resolve.moduleDirectories

Question

Ich habe Probleme mit Webpack resolve.moduleDirectories Config. Die Dokumentation ist wirklich geradlinig, aber ich kann es nicht funktionieren.

die folgende Struktur gegeben

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

Ich möchte die Komponente shared/buttons/SignUp.js auf mehrere Teile meiner App verwenden, so nehme ich an, dass ich die folgenden Webpack Einstellungen verwenden sollten: Von

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

Reports/index.js, kann ich noch nicht die Taste enthalten, auch die folgenden alle versuchen, einschließlich:

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

Gibt es etwas, was ich vermisse oder falsch mache? Ich habe ein Beispiel hier platziert: https://github.com/henriquebf/resolve-webpack

Answer 1

Wenn Sie solche Importe verwenden möchten, können Sie resolve.alias einrichten.

Beispiel:

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

Nach dieser Änderung import SubmitButton from 'shared/buttons/SignUp'; sollte funktionieren. Sie können Aliase nach Ihren Wünschen anpassen.