Webpack Async Laden mit dynamischem Require

Question

Ich bin sehr neu (Stunden) zu Webpack.

Ich möchte Async laden, das ist großartig, mit dynamischen erfordert. Angenommen, ich möchte asynchron eine der beiden Dateien './DIRECTORY/FOO' oder './DIRECTORY/BAR' anfordern. Hier ist eine nicht-dynamische Version, die, glaube ich, funktioniert, wie ich erwarte:

if (condition_holds) { 
    require.ensure([], function() 
        { 
         require('./DIRECTORY/FOO'); 
        }); 
} 
else { 
    require.ensure([], function() 
        { 
         require('./DIRECTORY/BAR'); 
        }); 
} 

Und hier ist mein Versuch zu machen, diese Dynamik:

var file_name = condition_holds ? "FOO" : "BAR"; 
require.ensure([], function() 
        { 
        require('./DIRECTORY/' + file_name); 
        }); 

Allerdings, wenn ich webpack verwenden, um diese Stücke zu kompilieren Code, ich bekomme sehr unterschiedliche Ergebnisse. Für die erste (nicht-statische) werden zwei verschiedene Dateien erzeugt, eine für FOO und eine für BAR, und nur diese Datei wird asynchron geladen. Für die Sekunde wird nur eine Datei produziert, die sowohl FOO als auch BAR enthält. Das ist nicht das, was ich erwartet habe oder möchte. Ich möchte, dass separate Dateien erstellt werden, eine für jedes Modul und nur dieses Modul, das asynchron heruntergeladen werden soll.

Ist das erwartete Verhalten? Wenn ja, warum, und wie kann man dynamische verwenden, aber immer noch separate Module bekommen, die jeweils einzeln geladen werden?

Hier ist meine webpack.config.js:

module.exports = 
{ 
    entry: { 
    bundle: './main.js' 
    }, 
    output: { 
    path: './public/js/', 
    filename: '[name].js', 
    publicPath: "/js/" 
    } 
}; 

Answer 1

Das Problem ist, dass webpack statisch Ihren Quellcode analysiert. Wenn es diese sieht:

require('./DIRECTORY/' + file_name); 

... es schafft eine context, die eine Abbildung ist, dass zur Laufzeit gebündelt Module auflösen kann. Da file_namealles nach statischen Analyse (Webpack nicht wirklich Ihren Code laufen lassen, um zu wissen, was verfügbar ist), bestimmt es alle möglichen Dateien, die unter ./DIRECTORY/ sein könnten und enthält sie in Ihrem Bundle, was nicht das ist, was Sie wollen.

Es gibt wirklich zwei Probleme zu lösen:

1. webpack Wie Sie Ihre Dateien in einzelne Stücke
2. Dynamisches Laden jene Brocken

Es ist wie jemand aufzuspalten sieht ein bundle-loader geschaffen hat, das lösen beide dieser Probleme.

var file_name = condition_holds ? "FOO" : "BAR"; 
var dynamicLoad = require('bundle!./DIRECTORY/' + file_name); 
dynamicLoad(function (loadedModule) { 
    // Use the module 
}); 

Nach this write-up, soll dies jede mögliche Datei in diesem Zusammenhang in sein eigenen Bündel aufgeteilt und Ihnen einen Weg geben, um asynchron diese Pakete zur Laufzeit zu laden.