Wie konfiguriert man den Webpack-Multicompiler für eine verschachtelte Anwendung?

Question

Mit webpack Config wie folgt:

module.exports = [ 
    { 
    entry: { main: './main/app.js' }, 
    module: [...] 
    }, { 
    entry: { sub: './sub/app.js' }, 
    module: [...] 
    } 
] 

Und main/app.js wie so:

import('./foo'); // all files inside ./main should be handled by first config 
import('../sub/bar'); // all files inside ./sub should be handled by second config 

würde Ich mag webpack so konfigurieren, dass jedes Objekt Config nur Dateien in diesem App-Verzeichnis behandelt. Das bedeutet, dass obwohl ich Dateien aus sub App in main App einschließen, möchte ich für alle Ladeprogramme nur für Dateien aus main App importieren und lassen Sie sub App-Dateien von sub App-Konfiguration behandelt werden.

Ich habe mehrere Webpack-Probleme und Dokumente durchgesehen, aber es scheint keine Lösung dafür zu geben. Ich hoffe, dass vielleicht jemand das Licht dazu bringen könnte, das zu erreichen.

Die Verwendung von include/exclude löst das Problem nicht - dies verhindert nur, dass Loader auf bestimmte Dateien angewendet werden, aber die Hauptanwendung versucht immer noch, sie zu laden und Fehler zu erzeugen, dass kein Loader für bestimmte Dateien existiert.

noParse oder webpackIgnorePlugin sind auch keine Option, da sub App eine vollwertige App ist, die andere Dateiimporte usw. machen wird und noParse würde diese Importe brechen.

Bearbeiten: Auf einer höheren Ebene, was ich versuche zu tun, ist eine Hauptanwendung, die mehrere Unteranwendungen dynamisch in das Fenster lädt (mit dynamischen import()).

Jede Unteranwendung sollte ihre eigene Webpack-Konfiguration haben und nur diese Konfiguration sollte für die Anwendung der richtigen Lader verantwortlich sein. Die Haupt-App sollte nur der Navigation dienen, die es erlaubt, die Sub-Apps dynamisch zu laden, ohne zu wissen, welche Loader sie brauchen könnten.

Answer 1

Wenn wir webpack ausführen, lädt es standardmäßig webpack.config.js, aber wir können webpack mehrere Konfigurationsdateien verwenden, die auf der App-Struktur basieren.

webpack --config="webpack.app1.config.js"

webpack --config="webpack.app2.config.js"

Auch wir können mehrere Einträge.

entry: { 
     app: [ 
     './src/app.js', //main javascript file 
     './src/app.scss', //main scss file 
     ], 
     vendor:['jquery'] 

    }, 

Dann können Sie in Modulregeln bestimmte Ordner je nach Struktur ausschließen. Es wird jedoch empfohlen, separate Webpack-Konfigurationsdateien für verschiedene App-Strukturen zu erstellen.