8

ベンダー コードを 2 つのチャンクに分割したいと思います。1 つはすべての angular ライブラリを含み、もう 1 つはその他すべてを含みます。

私のAngularアプリには単一のエントリポイントがあり、次のようにセットアップされています:

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

次に、CommonsChunkPlugin を使用して、他の 2 つのバンドルを構成します。

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

これにより、次の 3 つのファイルが生成されます。

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 には、私のアプリ コードだけが含まれています。
vendor.bundle.jsには、角度のあるものを除くすべてのサードパーティのライブラリが
含まれています。

他のサードパーティのライブラリを自動的に含めずに、角度モジュールのみを vendor.angular.bundle.js にバンドルする方法はありますか?

4

1 に答える 1