Webpack mit kleinen ersten Skript und asynchrone laden von allen anderen scripts

Habe ich begonnen, mit Webpack bei der Entwicklung üblichen web-sites, bestehend aus einer Anzahl von Seiten und von verschiedenen Seiten-Typen. Ich bin auf der RequireJs-Skript loader geladen, alle Abhängigkeiten auf Nachfrage bei Bedarf. Nur ein kleines Stück von javascript wird heruntergeladen, wenn die Seite geladen ist.

Was ich erreichen will, ist dies:

  • Einem kleinen ersten javascript-Datei, lädt Abhängigkeiten asynchron
  • Jeder Seite, geben Sie Ihre eigenen javascript, die möglicherweise auch Abhängigkeiten haben.
  • Gemeinsame Module, Hersteller Skripte sollten gebündelt werden, gemeinsame Skripte

Ich habe versucht, viele Konfigurationen, um dies zu erreichen, aber ohne Erfolg.

JS:

entry: {
    main: 'main.js', //Used on all pages, e.g. mobile menu
    'standard-page': 'pages/standard-page.js',
    'start-page': 'pages/start-page.js',
    'vendor': ['jquery']
},
alias: {
    jquery: 'jquery/dist/jquery.js'
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js"),
    new webpack.optimize.CommonsChunkPlugin('common.js')
]

In der html-ich will zum laden des javascripts so:

HTML:

<script src="/Static/js/dist/common.js"></script>
<script src="/Static/js/dist/main.js" async></script>

Und auf eine bestimmte Seite geben (Startseite)

HTML:

<script src="/Static/js/dist/start-page.js" async></script>

common.js sollte eine winzige Datei für schnelles laden der Seite. main.js Lasten async und require('jquery') im inneren.

Die Ausgabe von Webpack sieht vielversprechend aus, aber ich kann nicht Holen Sie sich die Anbieter bündeln zu laden asynchron. Andere Abhängigkeiten (meine eigenen Module und domReady) geladen, in ther automatisch generierte chunks, aber nicht jquery.

Finde ich viele Beispiele, die fast, aber nicht der wichtige Teil des Ladens Anbieter asynchron.

Ausgabe von webpack bauen:

                  Asset       Size  Chunks             Chunk Names
            main.js.map  570 bytes    0, 7  [emitted]  main
                main.js  399 bytes    0, 7  [emitted]  main
       standard-page.js  355 bytes    2, 7  [emitted]  standard-page
c6ff6378688eba5a294f.js  348 bytes    3, 7  [emitted]
          start-page.js  361 bytes    4, 7  [emitted]  start-page
8986b3741c0dddb9c762.js  387 bytes    5, 7  [emitted]
              vendor.js     257 kB    6, 7  [emitted]  vendor
              common.js    3.86 kB       7  [emitted]  common.js
2876de041eaa501e23a2.js     1.3 kB    1, 7  [emitted]  
InformationsquelleAutor erzki | 2015-10-07
Schreibe einen Kommentar