Webpack mit kleinem ersten Skript und asynchronem Laden aller anderen Skripte

Die Lösung für dieses Problem ist zweifach:

1. Zuerst müssen Sie verstehen wie Code-Splitting im Webpack funktioniert
2. Zweitens müssen Sie so etwas wie das CommonsChunkPlugin verwenden, um das gemeinsam genutzte Bundle zu generieren.

Code-Aufteilung

Bevor Sie Webpack verwenden, müssen Sie lernen, von der Konfiguration abhängig zu sein. Require.js drehte sich alles um Konfigurationsdateien. Diese Einstellung erschwerte mir den Übergang zu einem Webpack, das CommonJS in node.js, das keine Konfiguration benötigt, genauer nachempfunden ist.

In diesem Sinne ist Folgendes zu beachten. Wenn Sie eine App haben und möchten, dass sie einige andere Teile von Javascript asynchron lädt, müssen Sie eines der folgenden Paradigmen verwenden.

Require.ensure

require.ensure Ist eine Möglichkeit, einen "Split Point" in Ihrer Anwendung zu erstellen. Auch hier haben Sie vielleicht gedacht, dass Sie dies mit der Konfiguration tun müssen, aber das ist nicht der Fall. Wenn ich in meinem Datei-Webpack auf require.ensure Drücke, wird automatisch ein zweites Bundle erstellt und bei Bedarf geladen. Jeder Code, der innerhalb dieses Split-Points ausgeführt wird, wird in einer separaten Datei zusammengefasst.

require.ensure(['jquery'], function() {
    var $ = require('jquery');
    /* ... */
});

Require ([])

Dasselbe können Sie auch mit der AMD-Version von require() erreichen, die eine Reihe von Abhängigkeiten hat. Dadurch wird auch der gleiche Aufteilungspunkt erstellt:

require(['jquery'], function($) {
    /* ... */
});

Geteilte Bundles

In Ihrem obigen Beispiel verwenden Sie entry, um ein vendor-Bundle mit jQuery zu erstellen. Sie müssen diese Abhängigkeitsbündel nicht manuell angeben. Wenn Sie stattdessen die Trennpunkte über Ihrem Webpack verwenden, wird dies automatisch generiert.

Verwenden Sie entry nur für separate <script> - Tags, die Sie auf Ihren Seiten haben möchten.

Jetzt, da Sie all das getan haben, können Sie die CommonsChunkPlugin verwenden, um Ihre Blöcke zusätzlich zu optimieren, aber wieder wird der größte Teil der Magie für Sie erledigt und Sie müssen nicht mehr angeben, welche Abhängigkeiten geteilt werden sollen mach irgendetwas anderes. webpack ruft die freigegebenen Blöcke automatisch ab, ohne dass zusätzliche <script> - Tags oder eine entry - Konfiguration erforderlich sind.

Fazit

Das von Ihnen beschriebene Szenario (mehrere <script> - Tags) entspricht möglicherweise nicht Ihren Wünschen. Mit webpack können alle Abhängigkeiten und Pakete automatisch verwaltet werden, beginnend mit nur einem einzigen <script> - Tag. Nachdem ich mehrere Iterationen des Re-Factorings von require.js zu webpack durchlaufen habe, habe ich festgestellt, dass dies normalerweise der einfachste und beste Weg ist, um Ihre Abhängigkeiten zu verwalten.

Alles Gute!

Hier ist die Lösung, die ich gefunden habe.

Exportieren Sie zuerst diese beiden Funktionen nach window.* - Sie möchten sie im Browser.

export function requireAsync(module) {
    return new Promise((resolve, reject) => require(`bundle!./pages/${module}`)(resolve));
}

export function runAsync(moduleName, data={}) {
    return requireAsync(moduleName).then(module => {
        if(module.__esModule) {
            // if it's an es6 module, then the default function should be exported as module.default
            if(_.isFunction(module.default)) {
                return module.default(data);
            }
        } else if(_.isFunction(module)) {
            // if it's not an es6 module, then the module itself should be the function
            return module(data);
        }
    })
}

Wenn Sie dann eines Ihrer Skripts auf einer Seite einfügen möchten, fügen Sie dies einfach Ihrem HTML-Code hinzu:

<script>requireAsync('script_name.js')</script>

Jetzt wird alles im Verzeichnis pages/ in einen separaten Block vorkompiliert, der zur Laufzeit asynchron geladen werden kann, nur wenn dies erforderlich ist.

Darüber hinaus haben Sie mit den oben genannten Funktionen eine bequeme Möglichkeit, serverseitige Daten in Ihre clientseitigen Skripts zu übertragen:

<script>runAsync('script_that_needs_data', {my:'data',wow:'much excite'})</script>

Und jetzt können Sie darauf zugreifen:

// script_that_needs_data.js
export default function({my,wow}) {
    console.log(my,wow);
}