Webpack隱含供應商捆綁與polyfill捆綁

Question

我想建立三個捆綁：main.js,vendor.js和polyfill.js。 polyfill.js文件應該包含在polyfill.js文件中定義的模塊。應該通過提取從npm（node_modules）導入的所有依賴項來動態創建vendor.js文件。最後main.js應該包含除polyfill和vendor模塊之外的其他模塊，這些模塊實質上是我的應用程序代碼。

polyfill.js

import 'core-js/es7/reflect'; 
import 'zone.js/dist/zone'; 

main.js

import { NgModule, ApplicationRef } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { Store } from '@ngrx/store'; 

@NgModule([ 
    imports: [...] 
]) 
class AppModule { 
} 

我已經寫了下面的WebPack配置，但總是得到以下錯誤：

"CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (main)", 
    "CommonsChunkPlugin: While running in normal mode it's not allowed to use a non-entry chunk (vendor)" 

個webpack.config.prod.js

{ 
    entry: { 
    polyfill: './polyfill.ts', 
    main: './main.ts' 
    }, 
    output: { 
    publicPath: options.assetPath 
    }, 
    devtool: 'source-map', 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: function (module) { 
     const check = module.context && module.context.indexOf('node_modules') !== -1;   
     module.originalChunkNames = module.chunks.map(chunk=> chunk.name); 
     return check; 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'polyfill', 
     chunks: ['vendor'], 
     minChunks: ({ originalChunkNames }) => originalChunkNames.includes('polyfill'), 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['main', 'vendor', 'polyfill'], 
     minChunks: Infinity 
    }) 
    ] 
} 

在這裏我想給做的是動態創建vendor束包括所有node_modules我導入我的源文件的內容。通過包含在polyfill.js文件中明確定義的所有模塊來創建polyfill包。並最終main捆綁。

我試過很多例子來自的WebPack GitHub庫，但沒有他們的幫助我實現類似上述

Answer 1

我創建了一個Github repository證明工作的例子。

下面是的WebPack結構的重要部分，以實現這種類型的輸出：

{ 
    entry: { 
    polyfill: 'polyfill.ts', 
    main: 'main.ts' 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     chunks: ["main"], 
     minChunks: function(module) { 
     const check = 
      module.context && module.context.indexOf("node_modules") !== -1; 
     module.originalChunkNames = module.chunks.map(chunk => chunk.name); 
     return check; 
     } 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "polyfill", 
     chunks: ["vendor"], 
     minChunks: function({ originalChunkNames }) { 
     return originalChunkNames.includes("polyfill"); 
     } 
    }), 
    ] 
}