可能だと信じていることをやろうとしているのですが、Webpack のドキュメントだけでは、その方法がまったく理解できません。
私は、相互に依存する可能性のある複数のモジュールを含む JavaScript ライブラリを作成しています。さらに、すべてのモジュールで jQuery が使用され、一部のモジュールでは jQuery プラグインが必要になる場合があります。このライブラリは、一部またはすべてのモジュールを必要とする可能性のある複数の異なる Web サイトで使用されます。
モジュール間の依存関係を定義するのは非常に簡単でしたが、サードパーティの依存関係を定義するのは予想よりも難しいようです。
私が達成したいこと: 各アプリには、必要なサードパーティの依存関係を含むバンドル ファイルと、ライブラリからの必要なモジュールを含むバンドル ファイルの 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 を使用します。
- ウェブサイトバンドル: モジュール a、b、c 付き。
最終的には、jQuery をグローバルとして保持し、すべてのファイルでそれを require する必要がないようにしたいと思います (たとえば、メイン ファイルでのみ require できます)。また、jQuery プラグインは、必要な場合に $ グローバルを拡張するだけです (それらを必要としない他のモジュールで使用できる場合は問題ありません)。
これが可能だと仮定すると、この場合の webpack 構成ファイルの例はどのようなものになりますか? 構成ファイルでローダー、外部、プラグインの組み合わせをいくつか試しましたが、それらが何をしているのか、どれを使用すればよいのかがよくわかりません。 ありがとうございます!
ベストアンサー1
私のwebpack.config.js(バージョン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 ユーザー向けの検索インデックスの変更