[解決済み] Webpackでベンダースクリプトを個別にバンドルし、必要に応じて要求する方法とは？

質問

可能なはずのことをしようとしているのですが、webpackのドキュメントを見ただけでは、どうすればいいのかよくわかりません。

私は、互いに依存するかどうかわからないいくつかのモジュールでJavaScriptライブラリを書いています。その上、jQueryはすべてのモジュールで使用され、そのうちのいくつかはjQueryプラグインを必要とするかもしれません。このライブラリは、いくつかの異なるウェブサイトで使用され、それらのモジュールの一部または全部を必要とする可能性があります。

モジュール間の依存関係を定義するのはとても簡単でしたが、サードパーティーの依存関係を定義するのは、予想以上に難しいようです。

実現したいこと 各アプリに2つのバンドルファイルを用意し、1つには必要なサードパーティの依存関係を、もう1つには私のライブラリから必要なモジュールを入れたいのです。

例 : 私のライブラリに以下のようなモジュールがあるとします。

• a (requires: jquery, jquery.plugin1)
• b (requires: jquery, a)
• c (requires: jquery, jquery.ui, a, b)
• d (requires: jquery, jquery.plugin2, a)

そして、モジュール a、b、c を必要とするアプリ（ユニークなエントリーファイルとして見てください）があります。この場合、Webpack は以下のファイルを生成する必要があります。

• ベンダバンドル : jquery、jquery.plugin1、jquery.ui が含まれます。
• ウェブサイトバンドル : モジュールa,b,c付きです。

結局のところ、私はjQueryをグローバルにすることで、すべてのファイルでrequireする必要がなくなることを望んでいる（たとえば、メインファイルでのみrequireすることができる）。そして、jQueryプラグインは、それらが必要とされる場合に、$グローバルを拡張するだけでよい（それらを必要としない他のモジュールで利用可能であれば問題ない）。

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

解決方法は？

webpack.config.js (Version 1,2,3) ファイルに、次のような記述があります。

function isExternal(module) {
  var context = module.context;

  if (typeof context !== 'string') {
    return false;
  }

  return context.indexOf('node_modules') !== -1;
}

をプラグイン配列に追加しました。

plugins: [
  new CommonsChunkPlugin({
    name: 'vendors',
    minChunks: function(module) {
      return isExternal(module);
    }
  }),
  // Other plugins
]

これで、サードパーティのライブラリを必要に応じて1つのファイルにだけ追加するファイルができました。

もし、もっと細かくベンダーとエントリーポイントのファイルを分けたいなら。

plugins: [
  new CommonsChunkPlugin({
    name: 'common',
    minChunks: function(module, count) {
      return !isExternal(module) && count >= 2; // adjustable
    }
  }),
  new CommonsChunkPlugin({
    name: 'vendors',
    chunks: ['common'],
    // or if you have an key value object for your entries
    // chunks: Object.keys(entry).concat('common')
    minChunks: function(module) {
      return isExternal(module);
    }
  })
]

プラグインの順番は非常に重要であることに注意してください。

また、これはバージョン4で変更される予定です。それが正式に決まったら、この回答を更新します。

更新してください。 Windowsユーザ向けのindexOf検索の変更