Wie erstelle ich einen Webpack-Import-Alias ​​in React Static Boilerplate? die folgende <code>import</code>

Question

Ich habe:

// cwd: /project/pages/blog/category/red/index.js 

import PageHeader from '../../../components/PageHeader'; 

Und ich möchte in der Lage, es auf diese Weise zu schreiben (irgendwo in meinem Projekt):

// cwd: /project/pages/blog/category/red/index.js 

import PageHeader from 'components/PageHeader'; 

Ich habe versucht, mit webpack resolveoption aber ich scheint es nicht zu machen arbeiten:

config.resolve = { 
    alias: { 
    components: [ 
     path.resolve('../components/') 
    ] 
    } 
}; 

und

config.resolve = { 
    root: [ 
    path.resolve('../') 
    ] 
}; 

Fehle ich etwas?

Meine app-Architektur ist von React Static Boilerplate gegabelt, so mein webpack.config.js sieht aus wie this one

Answer 1

Das Problem scheint im Zusammenhang mit React Static Boilerplate, genauer gesagt beim Erstellen der statischen Seiten.

Ich habe einen Workaround gefunden, der den Job für jetzt erledigt. Ich hatte einen ~ an den Alias ​​vorangestellt wird, damit es nicht als node_module "behandelt" bekommt ..

config.resolve = { 
    alias: { 
    "~components": path.resolve(__dirname, '../components'), 
    "~decorators": path.resolve(__dirname, '../core/scripts/decorators'), 
    "~helpers": path.resolve(__dirname, '../core/scripts/helpers'), 
    "~i18n": path.resolve(__dirname, '../core/i18n'), 
    } 
}; 

Verbrauch:

import fetch from '~helpers/fetch'; 
import header from '~components/header'; 

Mehr Informationen zu diesem on this Github issue.

Answer 2

config.resolve = { 
    alias: { 
    components: path.resolve('../components/') 
    } 
}; 

alias Schlüsselwertpaare akzeptiert, mit dem Wert Wesen vom Typ string. Ich bin mir nicht sicher, ob es mit Array funktioniert.

Answer 3

Um mehr zu beantworten specificly wäre es gut zu wissen, wo PageHeader und Ihre webpack config:

vorausgesetzt:

• PageHeader ist in /project/pages/components
• und Ihre webpack Config auf Root-Ebene ist /project

dann Ihre Lösung würde wie folgt aussehen:

config.resolve = { 
    alias: { 
    components: path.resolve('./pages/components') 
    } 
}; 

es wieder auf dem Weg zu Ihrem webpack config und Ihrem components Verzeichnis abhängt. Die path.resolve wird entsprechend ändern.