mehrere Ausgänge für Webpack

Question

Ich möchte meine Reaktion App in zwei Teile zu trennen. Es wird eine Anmeldeseite geben, die einen gültigen Benutzer authentifiziert, und sobald ich authentifiziert bin, rendere ich die tatsächliche Webanwendung. Damit dies passiert, brauche ich zwei HTML-Dateien.

Ich denke, jede HTML-Datei wird wahrscheinlich zwei verschiedene Bündel verwenden. So würde mein login.html wahrscheinlich das folgende Skript verwenden ...

<script type="text/javascript" src='./scripts/bundle.js'></script> 

und meine index.html wird verwenden ...

<script type="text/javascript" src='./scripts/bundle2.js'></script> 

Aber wie kann ich Ausgang zwei Bündel in webpack?

Hier ist, was ich habe ...

module.exports = { 
    entry: {'./src'}, 

    devtool: 'source-map', 
    output: { 
    path:'/', 
    filename: 'scripts/bundle.js', 
    publicPath: '/' 
    }, 

    module: { 
    ...etc,etc. 

Wie Sie mein einziger Eintrittspunkt /src ist zu sehen ist, wo meine aktuelle index.js meine index.html Datei aufzufüllen befindet.

Die Datei index.js zum Befüllen meines login.html befindet sich im Ordner Authentication. Aber der folgende Eintrag wird nicht tun, was ich will ...

entry: {'./src', '/Authentication'} 

Ich brauche zwei Ausgänge für jede dieser HTML-Dateien, wie sie essentiall von einem anderen getrennt werden. Was sind meine Möglichkeiten hier? Gibt es einen Weg oder vielleicht eine Alternative, um zu erreichen, was ich will?

Answer 1

Es ist ziemlich üblich, Ihre Bundles in mehrere Dateien aufzuteilen. Webpack Dokumentation gibt eine schöne Erklärung dafür - Link

Wenn Sie also mehrere Einstiegspunkte für die App haben wollen, geben Sie einfach als key: value Paar in dem Eintrittspunkt wie folgt aus:

{ 
    entry: { 
     a: "./a", 
     b: "./b", 
     c: ["./c", "./d"] 
    }, 
    output: { 
     path: path.join(__dirname, "dist"), 
     filename: "[name].entry.js" 
    } 
} 

Die endgültigen Dateien erzeugt wird a.entry.js, b.entry.js und so weiter.