Başka bir giriş noktası paketinden bir modülü içe aktaran bir web paketi paketini nasıl oluşturabilirim?

Question

Başka bir pakete bağımlı ikinci bir web paketi paketi oluşturmaya çalışıyorum. Her sayfanın paket-bir olması gerekir, ancak yalnızca bazı sayfalarda paket-ikiye ihtiyaç vardır.

bohça-one.js

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

: Mesela

, ı (bunlar, önemsiz örneklerdir sadece noktaya erişebilmek için bunları kullanarak) Aşağıdaki giriş noktası komut dosyaları var diyelim bohça-two.js

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

ben CommonsChunkPlug kullanabileceğinizi biliyor WebPack yükleyicisi ve jQuery'yi içeren bir commons.js dosyası oluşturmak için, ancak bundle-two.js'yi yüklemem gerekmese bile her sayfada hem commons.js hem de bundle-one.js yüklenmesini gerektirir.

Temel olarak: tüm sayfalarım için "ana" JavaScript paketi olarak bundle-one.js'yi oluşturmanın ve sonra bundle-one.js'den jQuery'yi yüklemek için bundle-two.js kurulumuna sahip olmanın bir yolu var mı?

Answer 1

Seçenek 1

iki ayrı WebPack yapılandırmaları, her bir paket için bir tane. İkinci paket geneli, tell Webpack that jQuery is "external" yılında, Sonra

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

ve kod geri kalanı ile birlikte alınmamalıdır: İlk paket olarak expose jQuery as a global variable when you first require itexpose-loader kullanılarak

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

Bu şekilde İlk paket jQuery'yi global bir değişken olarak gösterir, ikinci grup ise kaynağı dahil etmek yerine bu global değişkeni arar. Bu çalışacaktır eğer

Seçenek 2

emin değilim ama CommonsChunkPlugin documentation varolan yığın olarak name yapılandırma seçeneği belirtebilirsiniz söylüyor. Adını bundle1 giriş noktası yığın adı olarak ayarlamayı deneyin ve teoride jQuery (ve tüm yığınlar arasında gerekli olan diğer lib'ler) paket 1'e eklenmeyecek ve grup 2'ye eklenmeyecektir.

Answer 2

Bunu aşağıdaki şekilde yapabilirsiniz. sağlamak eklentisi kullanarak -

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

Bu $ başvuran farklı dosyalarda bir sürü eski kodu üstlenmeden için yararlı olabilir.