別のエントリポイントバンドルからモジュールをインポートするWebpackバンドルを作成するにはどうすればよいですか？

Question

別のバンドルに依存する2番目のwebpackバンドルを生成しようとしています。すべてのページにはバンドル1が必要ですが、一部のページだけにバンドル2が必要です。

バンドルone.js

import $ from 'jquery'; 
$(document).data('key', 'value'); 

：例えば

、のは、私は（これらは、些細な例であり、向かいのポイントを得るためにそれらを使用して）次のエントリポイントスクリプトを持っているとしましょうバンドル-two.js

import $ from 'jquery'; 
const value = $(document).data('key'); 

私はCommonsChunkPlugを使用できることを知っていますWebPackローダーとjQueryを含むcommons.jsファイルを生成しますが、bundle-two.jsをロードする必要がない場合でも、すべてのページにcommons.jsとbundle-one.jsの両方をロードする必要があります。

基本的に、bundle-one.jsをすべてのマイページの「メイン」JavaScriptバンドルとして構築し、bundle-one.jsからjQueryをロードするようにbundle-two.jsを設定する方法はありますか？

Answer 1

オプション1

は、2つの別個のWebPACKのコンフィグ、各バンドルのいずれかを持ち。あなたの最初の束で、expose jQuery as a global variable when you first require itexpose-loaderを使用して：tell Webpack that jQuery is "external"、2番目のバンドルの設定で、その後

loaders: [ 
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' } 
] 

とコードの残りの部分で同梱されてはならない。

{ 
    externals: { 
     // require("jquery") is external and available 
     // on the global var jQuery 
     "jquery": "jQuery" 
    } 
} 

この道を最初のバンドルはグローバル変数としてjQueryを公開し、2番目のバンドルはソースを含まずにそのグローバル変数を探します。

オプション2

私はこれが機能するかどうかわからないんだけど、CommonsChunkPlugin documentationでは、既存のチャンクとしてname設定オプションを指定することができますと言います。バンドル1エントリポイントのチャンク名に名前を設定しようとすると、理論上、jQuery（およびすべてのチャンクに必要なその他のライブラリ）はバンドル1に組み込まれ、バンドル2ではなくバンドル1に組み込まれます。

Answer 2

これは、提供プラグインを使用する -

//webpack.config.js 
module.exports = { 
    entry: './index.js', 
    output: { 
    filename: '[name].js' 
    }, 
    externals: { 
    jquery: 'jQuery' 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
    }) 
    ] 
}; 

これは、$を参照する多くの異なるファイルで従来のコードをリファクタリングするのに便利です。