176

可能だと信じていることをしようとしていますが、webpackのドキュメントだけではどうすればよいのか本当にわかりません。

相互に依存するかどうかに関係なく、いくつかのモジュールを含む JavaScript ライブラリを作成しています。その上、jQuery はすべてのモジュールで使用され、一部のモジュールでは jQuery プラグインが必要になる場合があります。このライブラリは、一部またはすべてのモジュールを必要とするいくつかの異なる Web サイトで使用されます。

モジュール間の依存関係を定義するのは非常に簡単でしたが、サードパーティの依存関係を定義するのは思ったより難しいようです。

私が達成したいこと：各アプリに対して、必要なサードパーティの依存関係を含む2つのバンドルファイルと、ライブラリから必要なモジュールを含む2つのバンドルファイルが必要です。

例: 私のライブラリに次のモジュールがあるとします。

  • a (必須: jquery、jquery.plugin1)
  • b (必須: jquery、a)
  • c (必須: jquery、jquery.ui、a、b)
  • d (必須: jquery、jquery.plugin2、a)

そして、モジュール a、b、c を必要とするアプリ (一意のエントリ ファイルとして参照) があります。この場合の Webpack は、次のファイルを生成する必要があります。

  • ベンダー バンドル: jquery、jquery.plugin1、jquery.ui を使用。
  • Web サイト バンドル: モジュール a、b、c を含む。

最後に、jQuery をグローバルとして使用することをお勧めします。そのため、すべてのファイルでそれを要求する必要はありません (たとえば、メイン ファイルでのみ要求することができます)。また、jQuery プラグインは、必要な場合に備えて $ global を拡張するだけです (プラグインを必要としない他のモジュールで使用できる場合は問題ありません)。

これが可能であると仮定すると、この場合の webpack 構成ファイルの例は何でしょうか? 構成ファイルでローダー、エクスターナル、およびプラグインのいくつかの組み合わせを試しましたが、それらが何をしているのか、どれを使用すればよいのかがよくわかりません。ありがとうございました！

4

4 に答える 4

13

また、あなたのケースを完全に理解しているかどうかもわかりませんが、バンドルごとに個別のベンダー チャンクを作成する構成スニペットを次に示します。

entry: {
  bundle1: './build/bundles/bundle1.js',
  bundle2: './build/bundles/bundle2.js',
  'vendor-bundle1': [
    'react',
    'react-router'
  ],
  'vendor-bundle2': [
    'react',
    'react-router',
    'flummox',
    'immutable'
  ]
},

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle1',
    chunks: ['bundle1'],
    filename: 'vendor-bundle1.js',
    minChunks: Infinity
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor-bundle2',
    chunks: ['bundle2'],
    filename: 'vendor-bundle2-whatever.js',
    minChunks: Infinity
  }),
]

CommonsChunkPluginドキュメントへのリンク: http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

于 2015-05-23T23:02:42.707 に答える