Webpack: require.ensure und zusätzliche Anbieter Bündel

Question

Meine Website hat zwei Arten von Seiten:

Seiten, auf denen Sie Javascript-Widgets der Hauptinhalt der Seite (TypeA) sind und wo Widgets einige zusätzliche Inhalte sind, könnte dieser Benutzer Auslöser (Typ B).

So würde Ich mag meine JS Code-Basis in drei Bündel aufgeteilt:

• vendor.js - die auf allen Seiten
• runtime.js enthalten ist - für Widgets
• spezifische Einstiegspunkte für verschiedene Seiten

Für TypeA-Seiten ich habe dies:

<script src="vendor.js"></script> 
<script src="runtime.js"></script> 
<script src="pageA.js"></script> 
<!-- pageA.js launches the widget --> 

Aber für TypeB Ich möchte dies:

<script src="vendor.js"></script> 
<scriprt> 
    <!-- pseudo code --> 
    when('user clicks button', function() { 
    require.ensure('pageB.js', function(require) { 
     var pageBCode = require('pageB.js'); 
     <!-- do the magic --> 
     <!-- but I also need runtime.js here --> 
    }); 
    }); 
</script> 

Das Problem ist, dass ich runtime.js sowohl sync und async Seiten wiederverwendet werden soll. Aber ich kann nicht herausfinden, , wie runtime.js zusammen mit meinem On-Demand-Laden pageB.js laden. Ich muss es immer noch über <script src="runtime.js"></script> aufnehmen.

(ich benutze CommonChunksPlugin für die Erstellung von vendor.js und runtime.js, und es funktioniert gut auf TypeA Seiten)

Answer 1

Sie können ein Array an require.ensure als solche übergeben:

require.ensure(['pageB.js','runtime.js'], function(require){ 
    var pageBCode = require('pageB.js'), 
     runtimeCode = require('runtime.js'); 

    /** MAGIC! **/ 
});