2015-10-19 9 views
13

Anbetracht gibt es Webpack ConfigDynamische erfordern in Webpack bei der Erstellung

... 
entry: { 
    'bundle-with-dependency-a': 'common-entry.js', 
    'bundle-with-dependency-b': 'common-entry.js' 
}, 
resolve: { 
    alias: { 
     'dep-a': ..., 
     'dep-b': ... 
    }, 
}, 

und ich würde in common-entry.js etwas wie folgt erwartet:

require('dep-' + entryName.slice(-1)); 

D.h. Ich möchte die Definition für bestimmte erfordern von Config bereitstellen.

Das Problem ist, dass es mehr als 2 Abhängigkeit Optionen geben kann, vermeiden ich Copypasting. Und ich mache das zur Build-Zeit, anstatt die Chunks mit JSONP zu benötigen.

Wie kann dies dynamisch gemacht werden?

Die einzige Option, die ich hier habe, ist eine andere Konfiguration für jede dep, aber dies erfordert mehrere Webpack-Pässe statt Single. Nicht sehr praktisch.

Antwort

4

Verwenden des :

webpack.config.js

{ 
    entry: { 
    'bundle-with-dependency-a': 'imports?depName=>"dep-a"!./common-entry.js', 
    'bundle-with-dependency-b': 'imports?depName=>"dep-b"!./common-entry.js', 
    }, 
    // ... 
} 

depName Die Variable wird dann an das Modul common-entry.js ausgesetzt werden.

+0

Es sieht gut aus, ich bin mir nicht sicher, ob ich überhaupt wusste, dass Lader in Einträgen verwendet werden können. Ich frage mich, ob es andere Möglichkeiten als "Imports" gibt, es kann mehrere Deps mit demselben ('a' oder 'b') Präfix geben, was den loader Query String ziemlich lang macht. – estus

+0

Dann würde ich empfehlen, entweder einen eigenen Loader zu erstellen oder eine Funktion zu erstellen, die die Abfragezeichenfolge für Sie generiert. Ein Beispiel: 'imports ({depName: 'dep-a'}) + './Common-entry.js'' –

+0

Ja, die Abfrage ist gut genug. Ich frage mich, ob es andere Kreisverkehre gibt, z.B. 'context' und ContextReplacementPlugin (der Dokumentation von Webpacks mangelt es lächerlich an ihrer möglichen Verwendung). – estus