複数のエントリポイント、共通、ベンダー、チャンクを持つWebpackを設定する

Question

私は2つのエントリポイント（a.jsとb.js）を持つwebpackの設定をしています。共通とベンダー。

私は

a.jsとb.jsは小さくあるべきExplicit Vendor Chunk例を使用しています - モジュールのみ自分自身ではなく、任意の共有コード。私は "ランタイム"をアプリケーションランタイム（common.js）とベンダーランタイム（vendor.js）の間で分割したいと思います。

私はa.htmlをロードすると、vendor.js、common.jsとa .jsスクリプト

module.exports = { 
    context: __dirname, 
    devtool: 'inline-source-map', 
    entry: { 
    a: './src/a.js', 
    b: './src/b.js', 
    vendor: [ 
     'react', 
     'react-dom', 
     'react-router' 
    ] 
    }, 
    output: { 
    path: path.join(__dirname, './build'), 
    filename: '[name].js' 
    }, 
    plugins: [ 
    new CommonsChunkPlugin({ 
    name: "vendor", 
    minChunks: Infinity, 
    }) 
    ] 
} 

これは、ベンダーのチャンクを作成しますが、私はまたa.jsとb.js.の間で共通のアプリチャンクを作成したいです

webpackを使用して共通のアプリケーションチャンクを作成するにはどうすればよいですか？

Answer 1

私は数ヶ月前にこの問題に遭遇し、最後に解決策を見つけました。ここに私のWebPACKの設定はまた、私は含まれていないことに注意して

など、

entry: { 
    'app.en': './frontend/src/app.en.js', 
    'app.es': './frontend/src/app.es.js', 
}, 

/** 
* The order matters here a lot! 
*/ 
plugins: [ 
    /** 
    * The `common` chunk will catch code shared between `app.en.js` and `app.es.js`, 
    * e.g. the React components used in your app. 
    */ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'common', 
    }), 

    /** 
    * Catches all your vendor files, assuming they're in `node_modules`. You can 
    * change the logic to include other vendor folders as well, as shown 
    * below (we have one simply called 'vendor'). 
    */ 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: 'vendor', 
    minChunks: function (module) { 
     // this assumes your vendor imports exist in the node_modules directory 
     return module.context && (module.context.indexOf('node_modules') !== -1) 
    } 
    }), 
], 

をいくつかのロケール固有のコードを持って、その後、私たちは、コンポーネント、Reduxの減速に反応持って我々のアプリをインポートする2つのエントリポイントapp.en.jsとapp.es.jsを想定すると、です実際のアプリケーション（このケースでは、application.js）がエントリーポイントにあります。

例でよく見られるように、「ベンダー」エントリポイントは指定しなかったことにも注意してください。それは私のためには完全に機能しませんでした。