Aufteilen von Herstellerbibliotheken in mehrere Chunks mit Webpack

Ich möchte meinen Lieferantencode in zwei Teile teilen, einen, der alle eckigen Bibliotheken enthält, und einen anderen, der alles andere enthält.Aufteilen von Herstellerbibliotheken in mehrere Chunks mit Webpack

Meine Winkel App hat einen einzigen Eintrittspunkt und ist Setup so etwas wie:

entry: { 
    app: './path_to/app.js', 
    vendor: ['jquery', 'moment', 'numeral'], 
    'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs'] 
}

ich dann die CommonsChunkPlugin verwenden, um die beiden anderen Bundles zu konfigurieren:

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor', 
    chunks: ['app'], 
    warnings: false, 
    filename: 'vendor.bundle.js' 
}) 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor.angular', 
    chunks: ['app'], 
    warnings: false, 
    filename: 'vendor.angular.bundle.js' 
})

Dies erzeugt drei Dateien:

Version: webpack 1.13.1 
Time: 12719ms 
        Asset  Size Chunks    Chunk Names 
      app.bundle.js 19.2 kB  0 [emitted] app 
     vendor.bundle.js 484 kB  1 [emitted] vendor 
vendor.angular.bundle.js 652 kB  2 [emitted] vendor.angular 
    [0] multi vendor.angular 124 bytes {2} [built] 
    [0] multi vendor 88 bytes {1} [built] 
    + 124 hidden modules

app.bundle.js enthält nur meinen App-Code.
vendor.bundle.js enthält alle 3rd-Party-Bibliotheken außer angular stuff
vendor.angular.bundle.js enthält alle eckigen Sachen UND alle meine 3rd-Party-Bibliotheken, die bereits in vendor.bundle.js enthalten sind.

Gibt es sowieso, dass die eckigen Module in vendor.angular.bundle.js gebündelt sind, ohne automatisch die anderen 3rd-Party-Bibliotheken einzuschließen?

Quelle

2016-07-22 Nick

Was passiert, wenn Sie das Stück 'angular_stuff' anstelle von' vendor.angular' nennen? ... Es ist nur eine Ahnung, aber vielleicht bringt die Punktnotation dazu, dass das Webpack die Verkäufer-Sachen enthält. – andzep

@andzep Funktioniert nicht, versuchte das. Kein Größenunterschied. – Nick

Auch, Blick auf die Dokumente. Es gibt eine Option in 'CommonsChunkPlugin'' minChunks: Infinity' mit folgendem Zweck: 'Mit mehr Einträgen, stellt dies sicher, dass kein anderes Modul in den Lieferantenbrocken geht' ... also ist das vielleicht die fehlende Option. – andzep

Figured this out:

Die Reihenfolge der Materie des CommonsChunkPlugin im Plugins-Array.

Um die ‚Chunking‘ gewünscht, hier ist die Veränderung, die ich machen musste:

Nachbestellung der CommonsChunkPlugins so dass die Winkel Brocken waren zuerst.
Aktualisieren Sie die 'Vendor'-Konfiguration unten, um' vendor.angular 'im Array' Chunks 'zu verwenden.

Die aktualisierten CommonsChunkPlugins sieht nun wie:

new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor.angular', 
    chunks: ['app'], 
    warnings: false, 
    filename: 'vendor.angular.bundle.js' 
}) 
new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor', 
    chunks: ['vendor.angular'], 
    warnings: false, 
    filename: 'vendor.bundle.js' 
})

Die oben jetzt ergibt:

Version: webpack 1.13.1 
Time: 7451ms 
        Asset  Size Chunks    Chunk Names 
      app.bundle.js 19.2 kB  0 [emitted] app 
     vendor.bundle.js 484 kB  1 [emitted] vendor 
vendor.angular.bundle.js 221 kB  2 [emitted] vendor.angular 
    [0] multi vendor.angular 124 bytes {2} [built] 
    [0] multi vendor 88 bytes {1} [built] 
    + 124 hidden modules

Running:

webpack --progress --display-modules --display-chunks -v

Ich bin, dass alle Winkel überprüfen können verwandte Module sind jetzt in der vendor.angular.bundle.js und alle Nicht-eckige Module sind in der Tat in vendor.bundle.js

Quelle

2016-07-29 18:46:19 Nick

Aufteilen von Herstellerbibliotheken in mehrere Chunks mit Webpack

Antwort

Verwandte Themen