Dynamisches Laden webpack Bündel von einem anderen Projekt

Question

Hier ist, was ich versuche zu tun:

eine SubApp haben, dass, wenn sie mit webpack gebaut, ein vendor.js erstellt und app.js Bundles. Die auf diese Weise erstellte Anwendung funktioniert bereits. Haben Sie eine MainApp, die Anbieter und App-Pakete von SubApp dynamisch lädt. Dies funktioniert nicht.

Wenn die Pakete geladen, erhalte ich folgende Fehlermeldung:

Cannot read property 'call' of undefined 

Alle Code Code I bin mit:

SubApp webpack config:

{ 
    context: path.resolve(__dirname, './src'), 
    entry: { 
    app: './app.js', 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: '[name].js', 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks(module) { 
     return module.context && module.context.indexOf('node_modules') >= 0; 
     }, 
    }), 
    ], 
}; 

SubApp app.js:

import angular from 'angular'; 

angular.module('barApp', []) 
.component('foobar', { 
    template: `BAR APP`, 
}); 

MainApp webpack config:

{ 
    context: path.resolve(__dirname, './src'), 
    entry: { 
    app: './nav.js', 
    }, 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: '[name].js', 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.html$/, 
     use: [{ loader: 'html-loader' }], 
     }, 
    ], 
    }, 
    devServer: { 
    contentBase: path.resolve(__dirname, './src'), 
    }, 
}; 

MainApp app.js:

Promise.all([ 
    import('./SubApp/dist/vendor.js'), 
    import('./SubApp/dist/app.js'), 
]).then(([ vendor, app ]) => { 
    console.log('Success'); 
}).catch(err => { 
    console.log("Chunk loading failed", err); 
}); 

Lauf MainApp (ob von dev-Server oder gebaut Dateien) erzeugt: Chunk loading failed TypeError: Cannot read property 'call' of undefined.

Ich benutze webpack 2.5.0.

Edit: Nach einigen Untersuchungen sieht es so aus, als könnte ich mein aktuelles Setup funktionieren lassen, wenn ich Vendor und App sequenziell lade, würde aber das Laden erheblich verlangsamen, da ich auf das große warten müsste (Vendor) -Bündel, das zuerst geladen wird, bevor die aktuelle App abgerufen wird.

AFAIK, dynamisch geladene Module sollten weiterhin in der Reihenfolge ausgeführt werden, in der sie angefordert werden, nicht in der Reihenfolge, in der die Anforderung zuerst abgeschlossen wird.

Es gibt einige Hinweise, dass ich SubApp als library verpacken könnte, aber es ist mir nicht klar, wie das geht, wenn ich separate Anbieter und App-Bundles haben möchte.

Answer 1

Dies ist nur ein Vorschlag, aber gibt es irgendetwas, was Sie daran hindert, MainApp die Dateien der SubApp in seine Distribution zu bündeln, so dass der SubApp-Code tatsächlich in zwei Distributionen vorliegt?

So sehe ich es jetzt, wenn ich mich nicht irre, wie Benutzer auf Ihr Projekt zugreifen.

MainApp, Standalone -> SubApp as a resource 
SubApp, Standalone 

Während es aussehen wie Sie den gleichen Code an zwei Stellen setzen, ich denke, das mehrere Vorteile führen wird, einschließlich in der Lage, einige Standalone-Umgebungseinstellungen für die SubApp einzustellen, die überflüssig sein würde, oder zu Konflikten in die Umgebung Ihrer Haupt-App.

Wie funktioniert das eigentlich? Ich würde trotzdem empfehlen, die Webpack-Konfigurationen so oft wie möglich zu verwenden.webpack-merge ist ein tolles Paket für diese, Webpack-Konfiguration oder nicht, es verschmilzt schön und ist anpassbar.

<= means 'merged from' 

webpack.subapp.base.config.js 
webpack.mainapp.config.js <= webpack.subapp.resource.js <= webpack.subapp.base.config 
webpack.subapp.standalone.js <= webpack.subapp.base.config.js 

So Ihre Standalone/Ressource configs von SubApp werden alle Grundwerte aus der base Config laden, während Einstellungen auf Basis der Anwendung, ob es eigenständig oder nicht läuft.

Da es aussieht, dass Ihre SubApp und MainApp beide im selben Verzeichnis bedient werden (ist das korrekt?), Werden beim Zusammenführen dieser Konfigurationen keine Verzeichnisprobleme auftreten. Umso besser! Wenn Sie Probleme haben, verwenden Sie einfach '../' für Ihre Einträge in Ihrer resource Konfiguration für SubApp.

Ich hoffe, dass diese Antwort einige Skalierbarkeit in Ihrem Projekt inspirieren kann! Ich hatte auch diese Art von Problemen, und normalerweise war Webpack Merge die Antwort. Dies gilt auch, wenn Sie im dev/prod-Modus laufen. Denken Sie also auch über diese Möglichkeiten nach.

Letzte Frage

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Verwandte Themen

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.