Podział bibliotek dostawców na wiele części z pakietem sieci Web

Question

Chciałbym podzielić mój kod dostawcy na dwie części, jedną zawierającą wszystkie biblioteki kątowe i drugą, która zawiera wszystko inne.

Moja kątowe aplikacja ma jeden punkt i jest ustawiony coś takiego:

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

I wtedy użyć CommonsChunkPlugin skonfigurować dwa inne pakiety:

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' 
}) 

Wytwarza 3 pliki:

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 zawiera tylko mój kod aplikacji.
vendor.bundle.js zawiera wszystkie biblioteki stron trzecich z wyłączeniem rzeczy kanciastych
vendor.angular.bundle.js zawiera wszystkie kanciaste rzeczy I wszystkie moje biblioteki stron trzecich, które są już w sklepie vendor.bundle.js.

Czy w ogóle istnieje moduł kątowy w pakiecie vendor.angular.bundle.js, bez automatycznego dołączania do innych bibliotek?

Answer 1

zdobione to:

Kolejność względu na CommonsChunkPlugin w tablicy wtyczek.

aby uzyskać pożądany „wyrwy”, tutaj jest zmiana musiałem zrobić:

1. zmienić kolejność CommonsChunkPlugins tak, że kątowy kawałek był pierwszy.
2. Zaktualizuj poniżej konfigurację "sprzedawca", aby użyć "vendor.angular" w tablicy "porcje".

Zaktualizowane CommonsChunkPlugins teraz wygląda:

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' 
}) 

Powyższy teraz daje:

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 

Bieg:

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

jestem w stanie sprawdzić, czy wszystkie kątowe powiązane moduły znajdują się teraz w vendor.angular.bundle.js i wszystkich moduły nie-kątowe są w istocie w vendor.bundle.js